Javascript jquery滚动限制。？_Javascript_Jquery_Css

Javascript jquery滚动限制。？

javascript jquery css

Javascript jquery滚动限制。？,javascript,jquery,css,Javascript,Jquery,Css,在这里，我试图使我的两个id的#stop，#stop2即使在滚动后也被修复，并使我的#stop3滚动直到它到达#footer一旦到达#footer两个#stop，#stop2应该停止滚动。在我的情况下，两个#stop，#stop2正在滚动到#页脚，这不应该发生，我不知道哪里出了问题，接受任何帮助。提前谢谢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

在这里，我试图使我的两个id的

#stop

，

#stop2

即使在滚动后也被修复，并使我的

#stop3

滚动直到它到达

#footer

一旦到达

#footer

两个

#stop

，

#stop2

应该停止滚动。在我的情况下，两个

#stop

，

#stop2

正在滚动到

#页脚

，这不应该发生，我不知道哪里出了问题，接受任何帮助。提前谢谢

 <!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>


无标题文件
.1{宽度：100px；边框：1px实心#CCC；高度：200px；浮动：左侧；边距：0px 20px；背景：#F00；}
.footer{宽度：100%；高度：800px；背景：#339；清除：两者；}
$（窗口）。滚动（功能（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({
'位置'：'固定'，
“顶部”：“0px”
});
$（'#stop'）.css({
“左”：“4%”
});
$（'#stop2'）.css({
‘对’：‘2%’
});
$（'#stop3'）.css({
“左”：16.6%
});
$（'.scroller_-anchor'）.css（'height'，'50px'）；
} 
else if（$（this）.scrollTop（）>scroller_主播1&&$（'stop，'stop2'）.css（'position'）！='relative'））
{   
$（“#停止，#停止2，#停止3”）.css({
'位置'：'相对'，
'左'：'继承'，
“权利”：“继承”
});
}
else if（$（this）.scrollTop（）


这是我的fiddle jsfiddle.net/xPdD7
出于测试目的，我对您的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'
            });
        }      
    });

这里还有一个更新的小提琴：
这就是你想要达到的目标吗
 出于测试目的，我对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'
            });
        }      
    });

这里还有一个更新的小提琴：
这就是你想要达到的目标吗
 出于测试目的，我对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'
            });
        }      
    });

这里还有一个更新的小提琴：
这就是你想要达到的目标吗
 出于测试目的，我对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'
            });
        }      
    });

这里还有一个更新的小提琴：
这就是你想要达到的目标吗
 你能做一个三明治吗？另外，你能解释一下到底出了什么问题吗？@MMM请看我编辑的问题。这是给我的jsfiddle，它仍然不清楚你到底想实现什么。也许你可以模拟一些小图像来显示你在滚动时预期会发生什么？正如你在小提琴中看到的，当你滚动到页脚（蓝色）时，左右两个红色块都会进入页脚，这是不应该发生的。两个红色块都应该停在页脚上方。。！你能做一个三明治吗？另外，你能解释一下到底出了什么问题吗？@MMM请看我编辑的问题。这是给我的jsfiddle，它仍然不清楚你到底想实现什么。也许你可以模拟一些小图像来显示你在滚动时预期会发生什么？正如你在小提琴中看到的，当你滚动到页脚（蓝色）时，左右两个红色块都会进入页脚，这是不应该发生的。两个红色块都应该停在页脚上方。。！你能做一个三明治吗？另外，你能解释一下到底出了什么问题吗？@MMM请看我编辑的问题。这是给我的jsfiddle，它仍然不清楚你到底想实现什么。也许你可以模拟一些小图像来显示你在滚动时预期会发生什么？正如你在小提琴中看到的，当你滚动到页脚（蓝色）时，左右两个红色块都会进入页脚，这是不应该发生的。两个红色块都应该停在页脚上方。。！你能做一个三明治吗？另外，你能解释一下到底出了什么问题吗？@MMM请看我编辑的问题。这是给我的jsfiddle，它仍然不清楚你到底想实现什么。也许你可以模拟一些小图像来显示你在滚动时预期会发生什么？正如你在小提琴中看到的，当你滚动到页脚（蓝色）时，左右两个红色块都会进入页脚，这是不应该发生的。两个红色块都应该停在页脚上方。。！