Позиционирование блока
Вложений: 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, время: 13:12. |