Прилипающий (скользящий) блок снизу экрана — как прописать условие?
Здравствуйте!
Я занимаюсь версткой, но пока очень поверхностно знаком с js. Пробовал гуглить задачу, пытался методом «тыка» исправить готовые скрипты, но ничего путного не вышло. Хочу сделать прилипающий блок, но не сверху экрана, как часто можно видеть на сайтах, а снизу. Аналог можно посмотреть на tjournal.ru — нижний правый блок («О проекте», «Реклама» и т.п.). Пользователь скроллит до блока, а блок цепляется к нижней границе окна. И отцепляется, соответственно. Сейчас использую скрипт, который цепляет блок к верхней границе, вот листинг:
<script>
$(function() {
var fixblock_height = $('#fixblock').height();
var fixblock_pos = $('#fixblock').position().top; ;
$(window).scroll(function(){
if ($(window).scrollTop() > fixblock_pos){
$('#fixblock').css({'position': 'fixed', 'top':'0px', 'z-index':'10'});
}else{
$('#fixblock').css({'position': 'static'});
$('#headblock').css('padding-bottom', '0px');
}
})
});
</script>
<div id="fixblock">Содержимое скользящего блока</div> Буду благодарен за помощь в корректировке условия. |
Так задай блоку местоположение через стили и он будет внизу.
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 1000px;
}
#fixblock{
position: fixed;
bottom: 0;
left: 200px;
background-color: rgb(211, 211, 211);
}
</style>
</script>
</head>
<body>
<div id="fixblock">Содержимое скользящего блока</div>
</body>
</html>
Цитата:
|
Гм,
Во-первых, блок должен «цепляться» к экрану после прокрутки, а не изначально быть зафиксированным в правом нижнем углу. Во-вторых, position: fixed; — это фиксирование по отношению к окну браузера, когда мне необходимо фиксирование в рамках конкретной колонки (блока). Сайт не «резиновый», есть конкретная ширина, и, если применить position: fixed;, на экранах с большим разрешением блок будет прикреплен где-то вдалеке от сайта (с краю, то есть). |
yafet,
непонятное описание, но на всякий случай http://javascript.ru/forum/dom-windo...tml#post287819 |
Спасибо, но это как дополнение скрипта, иногда замерзание требуется.
Наглядно можно посмотреть в примере, там именно скриптом сделано. Мне требуется то же самое. |
Цитата:
|
|
Цитата:
Т.е., блок изначально находится не в зоне видимости первого окна. Пользователь скроллит, а когда блок полностью появился в видимости окна (внизу) — применяем блоку position: fixed;. |
просто топорно скрипт написан, на плавный вариант нужно чуток больше времени:)
|
| Часовой пояс GMT +3, время: 02:23. |