Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Позиционирование блока (https://javascript.ru/forum/misc/37111-pozicionirovanie-bloka.html)

boichukvd 08.04.2013 13:06

Позиционирование блока
 
Вложений: 2
Здравствуйте.
Стоит задача позиционирования или прилипание блока при прокрутке.
Есть два блоки, которые по высоте не помещаются в экран компьютера. Допустим: при прокрутке вниз, низ нижнего блока прилипал к экрану внизу, ну и при прокрутке вверх верхний блок прилипал к верху экрана.
Возможно ли такое сделать и как?

boichukvd 08.04.2013 13:44

Нашел такой вот код, практически то, что надо.
Думаю знающие понимают его работу, а как дописать под то что мне надо?
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");
	}
});

Aetae 08.04.2013 18:51

Вроде бы и понял, но всё равно html-код(максимально упрощённый) примера в студию.

boichukvd 08.04.2013 18:56

Цитата:

Сообщение от Aetae
Вроде бы и понял, но всё равно html-код(максимально упрощённый) примера в студию.

А может я сайт приведу где я это делаю, а то сомневаюсь, что поможет мой забитый html и css. Уверен что буде сложно понять

Aetae 08.04.2013 19:02

Потому и говорится, что максимально упрощённый: 3.5 div'а и css.

Эти блоки фиксированной высоты? Эти блоки одинаковой высоты? Итд.

boichukvd 08.04.2013 19:19

<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>

boichukvd 08.04.2013 22:00

Почему никто не может помочь, если что блок слева по ссылке: http://beauty-in-health.net/jumor/aforizmy-pro-dietu/
При прокрутке в конец блок уходит под footerwrap, а нужно чтобы останавливался коснувшись грани footerwrap. Плиз


Часовой пояс GMT +3, время: 20:25.