Позиционирование блока
Вложений: 2
Здравствуйте.
Стоит задача позиционирования или прилипание блока при прокрутке. Есть два блоки, которые по высоте не помещаются в экран компьютера. Допустим: при прокрутке вниз, низ нижнего блока прилипал к экрану внизу, ну и при прокрутке вверх верхний блок прилипал к верху экрана. Возможно ли такое сделать и как? |
Нашел такой вот код, практически то, что надо.
Думаю знающие понимают его работу, а как дописать под то что мне надо? var $window = $(window), $navigation = $("#sidebar-L"); $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"); } }); |
Вроде бы и понял, но всё равно html-код(максимально упрощённый) примера в студию.
|
Цитата:
|
Потому и говорится, что максимально упрощённый: 3.5 div'а и css.
Эти блоки фиксированной высоты? Эти блоки одинаковой высоты? Итд. |
<div id="header">Шапка</div> <div id="main"> <div id="sidebar-L">Здесь реклама, которая должна двигаться при прокрутке страницы</div> <div id="sidebar-R">Блок справа</div> <div id="contentWrapper">Контент</div> </div> <div id="footerWrap">Подвал</div> #main { padding-top: 20px; border-left: #888822 solid 1px; border-right: #888822 solid 1px; background-color:#FFF; } #sidebar-L { padding: 0 0 0 25px; margin: 0; width:165px; float:left; } #sidebar-R { position: relative; z-index: 2; width:265px; float:right; padding: 0 25px 0 0; } sidebar-L в себе содержит: <script type="text/javascript"><!-- google_ad_client = "ca-pub-9325669243895290"; /* Sidebar_L_160x600 */ google_ad_slot = "3334151273"; google_ad_width = 160; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"><!-- google_ad_client = "ca-pub-9325669243895290"; /* Sidebar_L_160x600 */ google_ad_slot = "3334151273"; google_ad_width = 160; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> |
Почему никто не может помочь, если что блок слева по ссылке: http://beauty-in-health.net/jumor/aforizmy-pro-dietu/
При прокрутке в конец блок уходит под footerwrap, а нужно чтобы останавливался коснувшись грани footerwrap. Плиз |
Часовой пояс GMT +3, время: 21:01. |