ограничение прокрутки jquery.

Question

ограничение прокрутки jquery.

0

здесь я пытаюсь сделать мои два id #stop, #stop2 фиксированным даже после прокрутки и сделать прокрутку #stop3 до тех пор, пока он не достигнет #footer когда он достигнет #footer как #stop, #stop2 должен остановить прокрутку. В моем случае оба #stop, #stop2 прокручиваются до #footer которого не должно было случиться, я не знаю, где я ошибаюсь, любая помощь принимается. #footer заранее.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .one{width:100px;border:1px solid #CCC;height:200px;float:left;margin:0px 20px;background:#F00;}
    .footer{width:100%;height:800px;background:#339;clear:both;}
    </style>
    </head>

    <body>

    <div class="scroller_anchor"></div>
    <div id="stop" class="one"></div>
    <div class="one" id="stop3" style="height:2000px;">

    </div>
    <div id="stop2" class="one"></div>
    <div class="scroller_anchor1"></div>
    <div class="footer" id="footer"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(window).scroll(function(e) {

        var scroller_anchor = $(".scroller_anchor").offset().top;
        var scroller_anchor1 = $(".scroller_anchor1").offset().top;
        if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed') 
        {    
           $('#stop,#stop2').css({
                'position': 'fixed',
                'top': '0px'
            });
            $('#stop').css({
                'left':'4%'

            });
            $('#stop2').css({
                'right':'2%'
            });
            $('#stop3').css({
                'left':'16.6%'
            });

            $('.scroller_anchor').css('height', '50px');
        } 

         else if ($(this).scrollTop() > scroller_anchor1 && $('#stop,#stop2').css('position') != 'relative' ) 
        {   
          $('#stop,#stop2,#stop3').css({
                'position': 'relative',
                'left':'inherit',
                'right':'inherit'

            });
        }
        else if ($(this).scrollTop() < scroller_anchor && $('#stop,#stop2').css('position') != 'relative' ) 
        {   
            $('.scroller_anchor').css('height', '0px');
          $('#stop,#stop2,#stop3').css({

                'position': 'relative',
                'left':'inherit',
                'right':'inherit'

            });
        }



    });

    </script>
    </html>

вот моя скрипка jsfiddle.net/xPdD7

3bu1 06 янв. 2014, в 12:41

Источник

0

Не могли бы вы сделать JSFiddle? Также не могли бы вы объяснить, что именно не так?
MMM 06 янв. 2014, в 14:21
0

@MMM МММ, пожалуйста, посмотрите на мой отредактированный вопрос. А вот jsfiddle jsfiddle.net/xPdD7
3bu1 07 янв. 2014, в 15:50
0

Мне все еще не ясно, чего именно вы пытаетесь достичь. Может быть, вы могли бы смоделировать несколько небольших изображений, чтобы показать, что вы ожидаете, когда вы прокручиваете?
wf4 23 янв. 2014, в 11:11
0

как вы видите на скрипке, когда вы прокручиваете, пока нижний колонтитул (синий) не появится, и левый и правый красные блоки попадут в нижний колонтитул, что не должно происходить. оба красных блока должны остановиться над нижним колонтитулом!
3bu1 23 янв. 2014, в 11:13

Показать ещё 2 комментария

Теги:

javascript

jquery

css

1 ответ

Ещё вопросы

Не могли бы вы сделать JSFiddle? Также не могли бы вы объяснить, что именно не так?
@MMM МММ, пожалуйста, посмотрите на мой отредактированный вопрос. А вот jsfiddle jsfiddle.net/xPdD7
Мне все еще не ясно, чего именно вы пытаетесь достичь. Может быть, вы могли бы смоделировать несколько небольших изображений, чтобы показать, что вы ожидаете, когда вы прокручиваете?
как вы видите на скрипке, когда вы прокручиваете, пока нижний колонтитул (синий) не появится, и левый и правый красные блоки попадут в нижний колонтитул, что не должно происходить. оба красных блока должны остановиться над нижним колонтитулом!

Bobby5193 · Accepted Answer · 2014-01-23T10-02-00.000Z

Я немного изменил код js для целей тестирования, но все жестко заданные значения могут быть изменены в соответствии с вашими конкретными потребностями:

  $(window).scroll(function(e) {

        var scroller_anchor = $(".scroller_anchor").offset().top;
        var scroller_anchor1 = $(".scroller_anchor1").offset().top;
        var footer = $(".footer").offset().top;
        if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed') 
        {    
           $('#stop,#stop2').css({
                'position': 'fixed',
                'top': '8px'
            });
            $('#stop2').css({
                'left':'280px'
            });
            $('#stop3').css({
                'left':'140px'
            });        }
        if (($(this).scrollTop()+200) > footer  ) 
        {
          $('#stop,#stop2').css({
              'position':'absolute',
              'top':'1800px'
            });
        }      
    });

Также здесь обновленная скрипка: http://jsfiddle.net/xPdD7/8/

Это то, чего вы пытаетесь достичь?