Как менять position в зависимости от уровня скрола страницы?

Статус
В этой теме нельзя размещать новые ответы.
Gentle

Gentle

Профессор
Регистрация
8 Окт 2007
Сообщения
140
Реакции
44
Очень понравилась штука на этой странице
Для просмотра ссылки Войди или Зарегистрируйся

Здесь position:absolute
Для просмотра ссылки Войди или Зарегистрируйся

Скроллим страницу чуть ниже и position оказывается fixed
Для просмотра ссылки Войди или Зарегистрируйся

Очень удобная фича! Как они это сделали? Я тоже так хочу)))

UPD:
polyetilen написал(а):
например такой код, проверяется прокрутка окна с позицией блока, если блок внутри зоны то fixed, если снаружи то absolute, зона от 200px до 1000px, используются jquery и scrolltop
Нажмите для раскрытия...

О!!! Спасибо большое! Это самый понятный для меня пример. Всё разъяснил и ответил на все вопросы. Просто прекрасно!
 
Аналогичное видел тут Для просмотра ссылки Войди или Зарегистрируйся

попробовал сохранить на рабочий стол, открыл, работает.
Сохраняй, удаляй всё лишнее и получишь такую фишку.
 
попробовал сохранить на рабочий стол, открыл, работает.
Сохраняй, удаляй всё лишнее и получишь такую фишку.
Нажмите для раскрытия...
У меня не получается. Удаляю, удаляется вместе с этим функционалом. Тот сайт, который я дал сразу после сохранения теряет такую возможность.

Гораздо легче удалять, если знаешь, что нужно оставить))) а вот как это работает мне и требуется понять
 
Эту вещь в простом виде можно сделать на css position:fixed;
Если в таком же виде как по ссылке - тогда копать в сторону JQuery придется, пользуйтесь
Скрытое содержимое доступно для зарегистрированных пользователей!
 
например такой код, проверяется прокрутка окна с позицией блока, если блок внутри зоны то fixed, если снаружи то absolute, зона от 200px до 1000px, используются jquery и scrolltop
HTML: 
<!DOCTYPE HTML>
<html>
<head>
 
<meta charset="UTF-8" />
<title>Автофиксирование</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
 
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    if($('#block').length){
        var block_position = $("#block").position();
        $(window).scroll(function() {
            //когда блок входит в зону
            if($(window).scrollTop() > block_position.top && $(window).scrollTop() < 1000 ){
                $("#block").css("position", "fixed");
                $("#block").css("top", "0");
            }
            //когда ниже зоны
            if($(window).scrollTop() > 1000 ){
                $("#block").css("position", "absolute");
                $("#block").css("top", "1000px");
            }
            //когда выше зоны
            if($(window).scrollTop() < block_position.top){
                $("#block").css("position", "absolute");
                $("#block").css("top", block_position.top + "px");
            }
        });
    }
});
</script>
 
</head>
 
<body>
    <div id="block" style="position:absolute;top:200px; right:0; border:1px solid #F00; height:300px;width:300px;">Фиксированный блок</div>
    <div style="position:absolute;top:200px; right:0; border-top:5px solid #F00; border-bottom:5px solid #F00; height:800px;width:300px;"></div>
    <div id="text" style="height: 3000px; width: 300px; border:1px solid #00FF00;">текст</div>
</body>
</html>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху