Скроллинг выводящий новости - Меню, слайдеры, ротаторы

Скроллинг выводящий новости - Меню, слайдеры, ротаторы

Скроллинг - это процесс который всегда можно использовать с пользой для себя и посетителей. Например, если научиться вычислять расстояние от верха страницы, которое по умолчанию равно нулю, то можно при переходе определенного рубежа Y - координат производить какое-нибудь действие.

Примеров использования можно привести много, все зависит от фантазии. Но один из обычных(в последние несколько лет), это кнопка перехода вверх при достижении позиции например в 1500 px и ниже от начала страницы. Но в данном уроке мы выведем не кнопку перехода вверх, а блок с новостями.

Если у вас сайт-визитка с динамическим контентом, то скроллинг может вам помочь в выводе статической информации, но если у вас сайт на котором периодически или даже регулярно публикуются новости, то блок с самыми новыми всегда можно вывести таким образом.

Суть данного урока показать способ вывода окна при скроллинге 1500 пикселей и ниже, а в это окно можно выводить все что пожелаете, например новости, рекламу, что угодно. Здесь выбор остается за вами.

Чтобы скроллинг мог взаимодействовать с нашим окном, ему нужно назначить класс. Назовем наш блок вывода информации при скроллинге ниже чем 1500 пикселей сверху классом news. Значит общий контейнер будет иметь вид:

<div class="news"></div>

Теперь внутри него нужно разместить содержимое, контентную часть которая будет появляться в момент когда скроллинг достигнет позиции 1500 пикселей и ниже. Для примера добавим несколько заголовков и немного текста, после чего наш блок с классом news будет выглядеть так:

<div class="news">

<h1>Создание сайтов</h1>

<h2>Уроки и примеры по сайтостроению </h2>

<h3>Вводный урок создания сайта с нуля</h3>

<p>Создание самого простого сайта обязательно начинается..</p>

</div>

Для того чтобы скроллинг был виден сразу при заходе на сайт, нужно скрыть его, присвоив через css свойство display:none классу news, а также для абсолютного позиционирования по видимой части экрана нужно задать позиционирование.

Чтобы блок не прокручивался вместе со скроллингом, а был постоянно на одном месте, используем позиционирование фиксированное ( position:fixed) , которое выведет блок поверх всего, и не будет реагировать на скроллинг.

Чтобы прижать блок к низу окна браузера, нужно использовать такой метод: сдвинуть на 100% вниз с помощью top:100%, в результате чего блок будет за пределами нижней видимой части экрана, и сдвинуть вверх на количество пикселей равное высоте блока.

Осуществить это можно задав отступ margin сверху с отрицательным параметром. Для высоты блока 250px, этот отступ будет: margin-top:-250px. В итоге css код будет выглядеть так(для визуализации добавим рамку с помощью border):

.news{display:none;position:fixed;top:100%;width:450px;height:250px;margin-top:-250px;border:1px solid #222;padding:5px}

Чтобы выполнить логическую операцию по вычислению скроллинга и выводу блока только при условии, что скролл равняется 1500 или ниже, используем библиотеку jQuery. Подключить jQuery онлайн с хранилища гугла(что и рекомендуется вместо размещения локально), можно так:

<script src="//ajax. googleapis. com/ajax/libs/jquery/1/jquery. min. js"></script>

Теперь остается определить саму логику, которая будет производить вычисления, и реагировать только при определенном условии, например если скроллинг страницы равен 1500 и ниже:

<script> jQuery().ready(function(){jQuery(".news");jQuery(window).bind("scroll",function(){if(jQuery(window).scrollTop()>1500){jQuery(".news").show();}else jQuery(".news").hide();});;})

</script>

В итоге мы получили код который будет реагировать на скроллинг страницы, и выводить содержимое контейнера. news только при условии что скроллинг страницы равен 1500 или больше. Содержимое блока с классом. news можно менять как хотите, в него можно вставить любой контент, блок, что угодно. Готовый к применению код будет выглядеть так:

<!DOCTYPE HTML>

<html>

<head>

<style>

.wrapper{height:6000px;width:100%}

.news{display:none;z-index:1;position:fixed;top:100%;width:450px;right:0;height:240px;margin-top:-250px;border:1px solid #222;padding:5px}

.news a{color:#001C17}

</style>

<script src="//ajax. googleapis. com/ajax/libs/jquery/1/jquery. min. js"></script>

<script> jQuery().ready(function(){jQuery(".news");jQuery(window).bind("scroll",function(){if(jQuery(window).scrollTop()>1500){jQuery(".news").show();}else jQuery(".news").hide();});jQuery(".news").click(function(){jQuery('html, body').animate({scrollTop:0},2000);});})

</script>

</head>

<body>

<div class="news">

<h1>Создание сайтов</h1>

<h2>Уроки и примеры по сайтостроению</h2>

<h3>Вводный урок создания сайта с нуля</h3>

<p>Создание самого простого сайта обязательно начинается с так называемого скелета(структуры) который как правило состоит из шапки(header) , контентной части(article), и нижней части, еще называемой подвалом(footer)..</p>

</div>

</body>

</html>

Вывод блока новости при скроллинге


Карта сайта


Информационный сайт Webavtocat.ru