Question

这里我试图让我的两个ID #stop，#stop2即使在滚动后也可以修复，并使#stop3滚动到达#footer一旦到达#footer 1}} #stop，#stop2都应该停止滚动。在我的情况下，#stop，#stop2都滚动到#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

Answer 1

为了测试目的，我已经修改了一些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/

这是你想要达到的目标吗？

jquery滚动限制。？

1 个答案: