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

Используя библиотеки jQuery, я покажу вам, как можно достигнуть эффекта ползанья блока с содержимым по определенному месту на web-странице. Данный пример поможет решить задачу привлечения внимания пользователей к конкретным данным, например, рекламе или похожим материалам сайта.

1. Например, у нас есть контейнер с идентификатором navigation. Ему присваиваем стиль:

#navigation {
position: relative;
float: right;
width: 150px;
}

2. Подключив библиотеку jQuery, мы можем далее использовать её синтаксис.

<script type="text/javascript" src="/jquery-1.7.1.min.js"></script>

3. Код, который позволяет контейнеру с идентификатором navigation, прикрепляться к верху страницы во время прокрутки:

$(document).ready(function() {
 var $window = $(window),
 $navigation = $("#navigation");
 $window.scroll(function() {
 if (!$navigation.hasClass("fixed") && ($window.scrollTop() > $navigation.offset().top)) {
 $navigation.addClass("fixed").data("top", $navigation.offset().top);
 }
 else if ($navigation.hasClass("fixed") && ($window.scrollTop() < $navigation.data("top"))) {
 $navigation.removeClass("fixed");
 }
 }); 
});

Скачать