Javascript 向下滚动页面后更改元素 css 位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4907872/
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
changing an elements css position after scrolling down the page
提问by sat
I am messing around with some jquery trying to get to grips with it.
我正在处理一些 jquery 试图掌握它。
I have a ul nav which has a absolute position set but after I scroll the page down by 200 pixels i would like that to switch to position fixed so that the nav always stays on the page.
我有一个 ul 导航，它设置了绝对位置，但是在我将页面向下滚动 200 像素后，我希望它切换到固定位置，以便导航始终停留在页面上。
How would I do this?
我该怎么做？
below is the example I am working on
下面是我正在研究的例子
回答by sat
Thanks to everyone for being so quick to help
感谢大家如此迅速地提供帮助
this is what i wanted
这就是我想要的
$(document).ready(function() {
var theLoc = $('ul').position().top;
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('ul').hasClass('fixed')) {
$('ul').removeClass('fixed');
}
} else {
if(!$('ul').hasClass('fixed')) {
$('ul').addClass('fixed');
}
}
});
});
i got it from
我从
Thankss!!!!!
谢谢！！！！
回答by Chris Heald
I wrote this jQuery pluginto do just that.
我编写了这个 jQuery 插件来做到这一点。
回答by Bojangles
Here is the code I use to create a "sticky" sidebar. You'll need to modify the IDs to suit your markup.
这是我用来创建“粘性”侧边栏的代码。您需要修改 ID 以适合您的标记。
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("#sidebar").offset();
$(window).scroll(function () {
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top) {
$("#sidebar").css({ position: 'fixed', top: '0px' });
} else {
$("#sidebar").css({ position: 'static' });
}
});
});
$(window).resize(function() {
sidebarScrollTop = $("#sidebar").offset().top;
});
$(document).resize(function() {
sidebarScrollTop = $("#sidebar").offset().top;
});
Basically, all you need to do is change the #sidebarfor the ID of the sidebar container. This code will see if the sidebar element is scrolled past the top of the screen. If it is, it changes it's position to fixed, and when it returns to being on the page again, the position is returned to static(default).
基本上，您需要做的就是更改#sidebar侧边栏容器的 ID。此代码将查看侧边栏元素是否滚动到屏幕顶部。如果是，则将其位置更改为fixed，并且当它再次返回到页面上时，位置将返回static（默认）。
The $(document).resize()and $(window).resize()functions will make sure the sidebar stays stick at the top of the page when the document/window is resized respectively. The document function will ensure the sidebar works properly even if you have jQuery animations changing the size of elements.
该$(document).resize()和$(window).resize()功能将确保侧栏停留坚持在页面的顶部时分别被调整的文件/窗口。即使您有 jQuery 动画更改元素的大小，文档功能也将确保侧边栏正常工作。
