Главная | Мой профиль | Регистрация | Выход | Вход Вы вошли как Гость | Группа "Гости" | Приветствую Вас Гость | RSS
Меню сайта
Катигории
Скрипты [2]
Таблицы [1]
jQuery [1]
Шаблоны сайтов [2]
Меню для сайтов [2]
Текст [1]
Linkslot
Купить ссылку здесь за руб.
Поставить к себе на сайт
Linkslot
Оплаченная реклама
Форма входа
Socialchance
Linkslot
Видео
Главная » 2015 » Сентябрь » 23 » Плавающий контейнер на jQuery
12:18
Плавающий контейнер на jQuery

Многим 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");
 }
 }); 
});

 

 


Скачать


Категория: jQuery | Просмотров: 179 | Добавил: ret123r | Теги: jQuery, контейнер, на, Плавающий | Рейтинг: 4.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Статистика
Linkslot
Бесплатные СМС
Мини-чат
Link Wall
Бесплатное
WMlink
© 2012-2017 - ret123r123r.narod.ru


 Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика Проверка тИЦ и PR     
 
 
 %