jquery滚动限制。？

在这里，我试图让我的两个ID的#stop，#stop2固定，即使滚动之后，让我#stop3滚动，直到它达到#footer一旦达到#footer都#stop，#stop2应停止scrolling.here在我的情况下，两个#stop，#stop2被滚动在#footer这不应该发生，我不知道我要去哪里错了，任何帮助接受。谢谢你提前。jquery滚动限制。？

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

来源

2014-01-06 3bu1

你可以制作一个JSFiddle吗？你也可以解释究竟发生了什么问题吗？ – MMM

@MMM请看我编辑的问题。这里是jsfiddle http://jsfiddle.net/xPdD7/ – 3bu1

对我来说，它仍然不清楚你到底想要达到什么目的。也许你可以模拟一些小图像来展示你在滚动时期望发生的事情？ – wf4

我已经修改了你的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/

这就是你要实现的目标？

来源

2014-01-23 11:40:24 Bobby5193

jquery滚动限制。？

回答

相关问题