一旦到达另一个div，就停止div滚动

基本上我目前有一个div保持固定并跟随用户滚动，直到它达到某一点。 我可以很容易地让它停在一个固定的像素位置，就像我在下面的例子中所做的那样，但因为我是一个jQuery白痴，我不知道如何让它停在div处。

这是我到目前为止使用的：

var windw = this; $.fn.followTo = function ( pos ) { var $this = this, $window = $(windw); $window.scroll(function(e){ if ($window.scrollTop() > pos) { $this.css({ position: 'absolute', top: pos }); } else { $this.css({ position: 'fixed', top: 0 }); } }); }; $('#one').followTo(400); 

这是一个例子： jsFiddle

我希望它一旦到达第二个div就停止的原因是因为我正在使用的流畅布局，第二个div将根据浏览器大小坐在不同的点。 为它停止定义一个特定点将不起作用。 任何人都有任何想法，我怎么能得到这样做我想要的？ 或者，固定div是否可以在达到一定百分比时停止滚动？ 我环顾四周但没找到任何东西。

谢谢你的帮助。

Answer 1

这是你在寻找什么？

http://jsfiddle.net/Tgm6Y/1447/

 var windw = this; $.fn.followTo = function ( elem ) { var $this = this, $window = $(windw), $bumper = $(elem), bumperPos = $bumper.offset().top, thisHeight = $this.outerHeight(), setPosition = function(){ if ($window.scrollTop() > (bumperPos - thisHeight)) { $this.css({ position: 'absolute', top: (bumperPos - thisHeight) }); } else { $this.css({ position: 'fixed', top: 0 }); } }; $window.resize(function() { bumperPos = pos.offset().top; thisHeight = $this.outerHeight(); setPosition(); }); $window.scroll(setPosition); setPosition(); }; $('#one').followTo('#two'); 

编辑：关于你的请求不要滚动到某一点，只需替换这个：

 if ($window.scrollTop() > (bumperPos - thisHeight)) { 

有了这个：

 if ($window.scrollTop() <= (bumperPos - thisHeight)) { 

Answer 2

受到MicronXD小提琴的启发，但是当DOM在文档负载（或其他原因）上被大量推动时，写得更灵活，这是我为自己的用法开发的另一个类似的解决方案：

 jQuery.fn.extend({ followTo: function (elem, marginTop) { var $this = $(this); var $initialOffset = $this.offset().top; setPosition = function() { if ( $(window).scrollTop() > $initialOffset ) { if ( elem.offset().top > ( $(window).scrollTop() + $this.outerHeight() + marginTop ) ) { $this.css({ position: 'fixed', top: marginTop }); } if ( elem.offset().top <= ( $(window).scrollTop() + $this.outerHeight() + marginTop ) ) { $this.css({ position: 'absolute', top: elem.offset().top - $this.outerHeight() }); } } if ( $(window).scrollTop() <= $initialOffset ) { $this.css({ position: 'relative', top: 0 }); } } $(window).resize( function(){ setPosition(); }); $(window).scroll( function(){ setPosition(); }); } }); 

然后你可以这样运行这个function：

 $('#div-to-move').followTo( $('#div-to-stop-at'), 60); 

60是您希望浮动元素在位置时从屏幕顶部具有的可选边距：固定，以像素表示。