jQuery 在某个点停止固定位置滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5902822/
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
Stopping fixed position scrolling at a certain point?
提问by Louise McComiskey
I have an element that is position:fixed and so scrolls with the page how i want it to however. when the user scrolls up I want the element to stop scrolling at a certain point, say when it is 250px from the top of the page, is this possible? Any help or advice would be helpful thanks!
我有一个元素，它是 position:fixed ，所以我想要它如何滚动页面。当用户向上滚动时，我希望元素在某个点停止滚动，比如距离页面顶部 250 像素时，这可能吗？任何帮助或建议都会有所帮助，谢谢！
I had a feeling that I would need to use jquery to do so. I tried getting the scrolling or location of the where the user is but got really confused, is there any jquery solutions?
我有一种感觉，我需要使用 jquery 来做到这一点。我尝试获取用户所在位置的滚动或位置，但真的很困惑，是否有任何 jquery 解决方案？
回答by James Montagne
Do you mean sort of like this?
你的意思是像这样吗？
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop()));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>
<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>回答by mVChr
Here's a quick jQuery plugin I just wrote that can do what you require:
这是我刚刚编写的一个快速 jQuery 插件，它可以满足您的要求：
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#yourDiv').followTo(250);
回答by bigspotteddog
Here is a complete jquery plugin that solves this problem:
这是一个完整的jquery插件，可以解决这个问题：
https://github.com/bigspotteddog/ScrollToFixed
https://github.com/bigspotteddog/ScrollToFixed
The description of this plugin is as follows:
这个插件的描述如下：
This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.
此插件用于将元素固定到页面顶部，如果元素会垂直滚动到视图之外；但是，它确实允许元素随着水平滚动继续向左或向右移动。
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
给定一个选项 marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍然会水平移动。一旦页面向下滚动超过目标位置，元素将恢复到页面上的原始位置。
This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.
此插件已在 Firefox 3/4、Google Chrome 10/11、Safari 5 和 Internet Explorer 8/9 中测试。
Usage for your particular case:
用于您的特定情况：
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed({ marginTop: 250 });
});
回答by Jure Ravli?
You can do what James Montagne did with his code in his answer, but that will make it flicker in Chrome (tested in V19).
你可以像 James Montagne 在他的回答中用他的代码所做的那样，但这会使其在 Chrome 中闪烁（在 V19 中测试）。
You can fix that if you put "margin-top" instead of "top". Don't really know why it works with margin tho.
如果您放置“margin-top”而不是“top”，则可以解决此问题。真的不知道为什么它适用于边距。
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
回答by JiiB
A possible CSS ONLYsolution can be achived with position: sticky;
一个可能的CSS ONLY解决方案可以通过position: sticky;
The browser support is actually really good: https://caniuse.com/#search=position%3A%20sticky
浏览器支持实际上非常好：https: //caniuse.com/#search=position%3A%20sticky
here is an example: https://jsfiddle.net/0vcoa43L/7/
这是一个例子：https: //jsfiddle.net/0vcoa43L/7/
回答by user3288218
my solution
我的解决方案
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
} else {
$("#theRelative").css("margin-top",$(this).scrollTop()-0);
}
});
});
回答by joseph falconer
In a project, I actually have some heading fixed to the bottom of the screen on page load (it's a drawing app so the heading is at the bottom to give maximum space to the canvas element on wide viewport).
在一个项目中，我实际上在页面加载时将一些标题固定在屏幕底部（它是一个绘图应用程序，因此标题位于底部以在宽视口上为画布元素提供最大空间）。
I needed the heading to become 'absolute' when it reaches the footer on scroll, since I don't want the heading over the footer (heading colour is same as footer background colour).
当它到达滚动页脚时，我需要标题变为“绝对”，因为我不希望标题越过页脚（标题颜色与页脚背景颜色相同）。
I took the oldest response on here (edited by Gearge Millo) and that code snippet worked for my use-case. With some playing around I got this working. Now the fixed heading sits beautifully above the footer once it reaches the footer.
我在这里接受了最古老的回复（由 Gearge Millo 编辑），该代码片段适用于我的用例。通过一些玩耍，我得到了这个工作。现在，一旦到达页脚，固定标题就会漂亮地位于页脚上方。
Just thought I'd share my use-case and how it worked, and say thank you! The app: http://joefalconer.com/web_projects/drawingapp/index.html
只是想我会分享我的用例以及它是如何工作的，然后说谢谢！应用程序：http: //joefalconer.com/web_projects/drawingapp/index.html
/* CSS */
@media screen and (min-width: 1100px) {
#heading {
height: 80px;
width: 100%;
position: absolute; /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
bottom: 0;
}
}
// jQuery
// Stop the fixed heading from scrolling over the footer
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css( { position: 'absolute', bottom: '-180px' } );
} else {
$this.css( { position: 'fixed', bottom: '0' } );
}
});
};
// This behaviour is only needed for wide view ports
if ( $('#heading').css("position") === "absolute" ) {
$('#heading').followTo(180);
}
回答by Nathan McGinness
I wrote a blog post about thisthat featured this function:
$.fn.myFixture = function (settings) {
return this.each(function () {
// default css declaration
var elem = $(this).css('position', 'fixed');
var setPosition = function () {
var top = 0;
// get no of pixels hidden above the the window
var scrollTop = $(window).scrollTop();
// get elements distance from top of window
var topBuffer = ((settings.topBoundary || 0) - scrollTop);
// update position if required
if (topBuffer >= 0) { top += topBuffer }
elem.css('top', top);
};
$(window).bind('scroll', setPosition);
setPosition();
});
};
回答by Zohaib
A Solution using Mootools Framework.
使用 Mootools 框架的解决方案。
http://mootools.net/docs/more/Fx/Fx.Scroll
http://mootools.net/docs/more/Fx/Fx.Scroll
Get Position(x & y) of the element where you want to stop the scroll using $('myElement').getPosition().x
$('myElement').getPosition().y
For a animation sort of scroll use :
new Fx.Scroll('scrollDivId', {offset: {x: 24,y: 432} }).toTop();
To just set scroll immediately use :
new Fx.Scroll(myElement).set(x,y);
使用 $('myElement').getPosition().x 获取要停止滚动的元素的 Position(x & y)
$('myElement').getPosition().y
对于滚动使用的动画排序：
new Fx.Scroll('scrollDivId', {offset: {x: 24,y: 432} }).toTop();
要立即设置滚动，请使用：
new Fx.Scroll(myElement).set(x,y);
Hope this Helps !! :D
希望这可以帮助 ！！:D
回答by leu
I liked this solution
我喜欢这个解决方案
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
my problem was that I had to deal with a position relative container in Adobe Muse.
我的问题是我必须处理 Adobe Muse 中的位置相关容器。
My solution:
我的解决方案：
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
}
});
