javascript 一旦到达另一个 div 停止 div 滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10989695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop div scrolling once it reaches another div
提问by mattmouth
Basically I currently have a div which stays fixed and follows the user down as they scroll until it reaches a certain point. I can easily make it stop at a fixed pixel position as I have done in the below example, but because I'm a jQuery idiot I have no idea how to make it stop at a div instead.
基本上，我目前有一个 div，它保持固定并跟随用户向下滚动，直到达到某个点。我可以很容易地让它停在一个固定的像素位置，就像我在下面的例子中所做的那样，但是因为我是一个 jQuery 白痴，我不知道如何让它停在一个 div 上。
Here's what I've used so far:
这是我迄今为止使用过的：
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);
Here's the example: jsFiddle
这是示例：jsFiddle
The reason I want it to stop once it reaches a second div is because with the fluid layout I'm using, the second div will be sitting at different points depending on the browser size. Defining a specific point for it to stop at won't work. Anyone got any ideas as to how I can get this to do what I want? Alternatively, is it possible for the fixed div to stop scrolling once it reaches a percentage of the way down? I've looked around but haven't found anything.
我希望它在到达第二个 div 时停止的原因是因为使用我正在使用的流体布局，第二个 div 将根据浏览器大小位于不同的点。定义一个特定的点让它停下来是行不通的。任何人对我如何才能做到我想做的事情有任何想法？或者，固定 div 是否有可能在达到一定百分比后停止滚动？我环顾四周，但没有找到任何东西。
Thanks for any help.
谢谢你的帮助。
回答by MicronXD
Is this what you were looking for?
这就是你要找的吗？
http://jsfiddle.net/Tgm6Y/1447/
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');
EDIT: about your request to not scroll until a certain point, just replace this:
编辑：关于您在某一点之前不滚动的请求，只需替换以下内容：
if ($window.scrollTop() > (bumperPos - thisHeight)) {
with this:
有了这个：
if ($window.scrollTop() <= (bumperPos - thisHeight)) {
回答by Adal
Inspired by MicronXD's fiddle, but written to be more flexible when the DOM is getting pushed around a lot on document load (or other reasons), here's another similar solution I developed for my own usage:
受 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(); });
}
});
Then you can run the function as such:
然后你可以这样运行函数：
$('#div-to-move').followTo( $('#div-to-stop-at'), 60);
60 is the optional margin you want the floating element to have from the top of the screen when in position: fixed, expressed in pixels.
60 是您希望浮动元素在位置时距屏幕顶部的可选边距：固定，以像素表示。
