Javascript 滚动时将对象固定到浏览器窗口的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6980821/
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
Fix object to top of browser window when scrolling
提问by Callum Whyte
I saw recently a new interesting feature in the new gmail and also in the HTML5 bing preview that fixes a navigation bar to the top of the browser window when scrolling. The bar may start 100px down the page but when you scroll and it reaches the top of the browser window, it fixes there until you scroll back up above where it was originally positioned.
我最近在新的 gmail 和 HTML5 bing 预览中看到了一个有趣的新功能，它在滚动时将导航栏固定到浏览器窗口的顶部。该栏可能从页面向下 100 像素开始，但是当您滚动并到达浏览器窗口的顶部时，它会固定在那里，直到您向上滚动到它原来所在的位置上方。
My question is; how can I do this effect or do something similar to this effect?
我的问题是；我怎样才能做到这种效果或做类似这种效果的事情？
I hope you can understand my question and what I'm trying to describe.
我希望你能理解我的问题和我想描述的内容。
采纳答案by g_thom
If you want the element to start further down on the page, then stay fixed on the top as you scroll down, this may be a good start:
如果您希望元素在页面上进一步向下开始，然后在向下滚动时保持固定在顶部，这可能是一个好的开始：
回答by polloss
I know this post it's a bit old, but still very usefull.. i just wanted to add a jquery version (a little bit cleaner and configurable), but it's a modified version of the Andrew D. answer.
我知道这篇文章有点旧，但仍然非常有用..我只想添加一个 jquery 版本（更简洁和可配置），但它是 Andrew D. 答案的修改版本。
In this case i don't have two classes, instead i have an relative positioned div and when i reach a certain point (max_scroll) i add a class to the object, and that class is what makes it float
在这种情况下，我没有两个类，而是有一个相对定位的 div，当我到达某个点（max_scroll）时，我向对象添加了一个类，而该类就是使它浮动的原因
Below is the javascript (all done inside de document ready function)
下面是 javascript（全部在 de document ready 函数中完成）
<script type="text/javascript">
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way
$(document).ready(function(){
$(window).scroll(function () {
var navbar = $(".filterbutton");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) {
navbar.addClass("filterbuttonFixed");
// console.log("go floated");
}
else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed") ) {
// console.log("return to normal");
navbar.removeClass("filterbuttonFixed");
}
}
});
</script>
and this is my nav-bar container div
这是我的导航栏容器 div
<div id="floatable-nav-bar" class="my-relative-position-class">
<nav class="page-menu">
<ul class="scroll-nav">
<li><a class="selected" href="#first">Section 1</a></li>
<li><a class="" href="#second">Section 2</a></li>
<li><a class="" href="#third">Section 3</a></li>
<li><a class="" href="#fourth">Section 4</a></li>
</ul>
</nav>
</div>
and last but not least, my nav-floated style
最后但并非最不重要的是，我的导航浮动风格
#floatable-nav-bar.nav_floated {
position:fixed;
top:1px;
left: 0;
width:100%;
text-align: center;
background: #EEE;
padding: 5px 0;
}
I know this isn't the simplest example, but for jQuery users maybe this is a simpler approach, and i think it's better to just add and remove one class (at least it was for me).
我知道这不是最简单的例子，但对于 jQuery 用户来说，这可能是一种更简单的方法，我认为最好只添加和删除一个类（至少对我来说是这样）。
回答by Andrew D.
If browser supports "position:fixed" next plain javascript example is more fast:
如果浏览器支持“位置：固定”，下一个普通的javascript示例会更快：
<html>
<head>
<style>
html,body {
margin: 0;
}
#navbar.navbar_fixed {
position:fixed;
top:0px;
width:100%;
height:100px;
background-color:#f00;
}
#navbar.navbar_absolute {
position:absolute;
top:100px;
width:100%;
height:100px;
background-color:#f00;
}
</style>
<script type="text/javascript">
function window_onload() {
window.addEventListener("scroll",navbar_reset_top,false);
}
var navbar_top=100;
function navbar_reset_top() {
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
document.getElementById("navbar").className="navbar_fixed";
}
else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
document.getElementById("navbar").className="navbar_absolute";
}
}
</script>
</head>
<body onload="javascript:window_onload();">
<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>
</body>
</html>
回答by FMD
Use:
用：
#element {
position: fixed;
right: 200px;
top: 200px;
}
"fixed" means the element is positioned relative to the browser window.
“固定”表示元素相对于浏览器窗口定位。
回答by Ahsan Rathod
By setting the div's position to position:fixed
通过将 div 的位置设置为 position:fixed
回答by Nileshd
You can do it something like this :
你可以这样做：
css
css
body {
height: 3000px;
top: 0;
}
#image {
width: 100%;
background: #444;
height: 50px;
}
#scroller{
height:100px;
background:#ccc;
}
.stuck{
position:fixed;
z-index:100;
width:100%;
top:0;
}
script
脚本
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#scroller').addClass('stuck');
} else {
$('#scroller').removeClass('stuck');
}
});
after scroll 50 px it will change the css of scroller.
滚动 50 像素后，它将更改滚动条的 css。
this may be a good start
这可能是一个好的开始
回答by Kunal Sarin
Rather then defining the scroll lenght, why can't we define the object's position? say once it reaches top:0 then trigger the script. This way it will be more device friendly.
而不是定义滚动长度，为什么我们不能定义对象的位置？说一旦达到 top:0 然后触发脚本。这样，它将对设备更加友好。
