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

Скроллинг и вывод новостей


15.08.2013 21:124665

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


Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Появляющийся Блок , Скроллинг





«Скроллинг и вывод новостей» - Похожие страницы

Новости в две колонки - Cotonti Вывод новостей Cotonti в две колонки++ Часто бывает так, что нужно вывести новости не в одну колонку, а в несколько, например в две колонки. В этом нам помогут некоторые действия с помощью jQuery , а именно присвоение класса с фильтром каждого вт...
Webmoney вывод на карту Webmoney вывод на карту ++ Webmoney вывод на карту денег в Украине становится все более популярным, и все больше пользователей ищут информацию о том, как это сделать правильно. Теперь пользователи системы имеют возможность вывести Web...
Facebook выпустил приложeние Paper для чтeния новостей Facebook выпустила приложение для чтения новостей++ Facebook выпустил приложeние Paper для чтeния новостей и просмотра контeнта соцсети. Сервис группируeт посты по категориям, тaким как фотография, спорт, eда, наука, дизaйн. Пользователи могут подписывaться н...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям