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

Тема в разделе "JavaScript", создана пользователем Gentle, 19 июн 2013.

Статус темы:
Закрыта.
Модераторы: ZiX
  1. Gentle

    Gentle Постоялец

    Регистр.:
    8 окт 2007
    Сообщения:
    115
    Симпатии:
    13
    Очень понравилась штука на этой странице


    Здесь position:absolute
    [​IMG]

    Скроллим страницу чуть ниже и position оказывается fixed
    [​IMG]

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

    UPD:
    О!!! Спасибо большое! Это самый понятный для меня пример. Всё разъяснил и ответил на все вопросы. Просто прекрасно!
     
  2. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Аналогичное видел тут http://pr-cy.ru/a/site.ru

    попробовал сохранить на рабочий стол, открыл, работает.
    Сохраняй, удаляй всё лишнее и получишь такую фишку.
     
  3. Gentle

    Gentle Постоялец

    Регистр.:
    8 окт 2007
    Сообщения:
    115
    Симпатии:
    13
    У меня не получается. Удаляю, удаляется вместе с этим функционалом. Тот сайт, который я дал сразу после сохранения теряет такую возможность.

    Гораздо легче удалять, если знаешь, что нужно оставить))) а вот как это работает мне и требуется понять
     
  4. APXOH

    APXOH Создатель

    Регистр.:
    16 янв 2013
    Сообщения:
    36
    Симпатии:
    6
    Эту вещь в простом виде можно сделать на css position:fixed;
    Если в таком же виде как по ссылке - тогда копать в сторону JQuery придется, пользуйтесь
     
  5. Compressor

    Compressor

    Регистр.:
    31 янв 2009
    Сообщения:
    314
    Симпатии:
    200
  6. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    например такой код, проверяется прокрутка окна с позицией блока, если блок внутри зоны то 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>
     
    Gentle нравится это.
  7. joom-joom

    joom-joom

    Регистр.:
    28 фев 2010
    Сообщения:
    429
    Симпатии:
    148
Статус темы:
Закрыта.