javascript 滚动后的Javascript粘性div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17893771/
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
Javascript sticky div after scroll
提问by Kishore
This question maybe stupid for many here. I am making sticky div after scroll in pure JS. Some people may advice to make it in jQuery but i am not interested in it. What i need is something similar to this. Here the div moves all the way to top but i need it to have 60px top. I made a script but it not working. Can anyone help me solve this?
对于这里的许多人来说，这个问题可能很愚蠢。我在纯 JS 中滚动后制作粘性 div。有些人可能会建议在 jQuery 中制作它，但我对它不感兴趣。我需要的是类似的东西这个。这里 div 一直移动到顶部，但我需要它有 60px 顶部。我做了一个脚本，但它不起作用。谁能帮我解决这个问题？
Here is my code.
这是我的代码。
HTML
HTML
<div id="left"></div>
<div id="right"></div>
CSS
CSS
#left{
float:left;
width:100px;
height:200px;
background:yellow;
}
#right{
float:right;
width:100px;
height:1000px;
background:red;
margin-top:200px;
}
JS
JS
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
This what i need to achieve. The left div has to have margin-top:200pxand position:absoluteon page load. When the user scrolls the page, the left div should scroll and when it reaches top:60px;its position and margin-top should change to position:fixedand margin-top:60px;
这是我需要实现的。左侧 div 必须具有margin-top:200px和position:absolute页面加载。当用户滚动页面时，左边的 div 应该滚动，当它到达top:60px;它的位置时，margin-top 应该变成position:fixed和margin-top:60px;
Here is the FIDDLE
这是小提琴
回答by Jay Harris
CSS
CSS
#left {
float:left;
width:100px;
height:200px;
background:yellow;
margin:200px 0 0;
}
#left.stick {
position:fixed;
top:0;
margin:60px 0 0
}
added a stick class, so javascript doesn't have to do too much work.
添加了stick 类，因此javascript 不必做太多工作。
JS
JS
// set everything outside the onscroll event (less work per scroll)
var left = document.getElementById("left"),
// -60 so it won't be jumpy
stop = left.offsetTop - 60,
docBody = document.documentElement || document.body.parentNode || document.body,
hasOffset = window.pageYOffset !== undefined,
scrollTop;
window.onscroll = function (e) {
// cross-browser compatible scrollTop.
scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
// if user scrolls to 60px from the top of the left div
if (scrollTop >= stop) {
// stick the div
left.className = 'stick';
} else {
// release the div
left.className = '';
}
}
