Javascript 当我向下滚动页面时，如何让 div 跟随我？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6691558/
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
How do I make a div follow me as I scroll down the page?
提问by TIMEX
The user enters the site.
用户进入网站。
At this point, the div is in the middle of the page.
此时，div位于页面中间。
As he scrolls down the page, the div first begins to move upward, but once it hits the top, it stays there.
当他向下滚动页面时，div 首先开始向上移动，但一旦到达顶部，它就会停留在那里。
As he scrolls further down the page, the div stays near the top, always visible to the user.
当他进一步向下滚动页面时，div 停留在顶部附近，始终对用户可见。
As he scrolls up the page all the way to the top, the div once again stays back in position where it was originally.
当他将页面一直向上滚动到顶部时，div 再次回到原来的位置。
回答by T.J. Crowder
You can hook the scrollevent on the windowobject. When processing the event, look at the vertical scroll position of the window/document (see this answeron SO for how to do that). Use absolute positioning for your divand update its topas coordinate as necessary.
您可以scroll在window对象上挂钩事件。处理事件时，请查看窗口/文档的垂直滚动位置（有关如何执行此操作，请参阅SO 上的此答案）。为您使用绝对定位div并top根据需要更新其坐标。
FWIW, I would be very careful doing this. Usually when a user scrolls, it's because they want to look at different content than what's on the page. Personally, I hate boxes that follow me around on web pages. :-) But that doesn't mean there isn't a good reason for doing this on occasion.
FWIW，我会非常小心地这样做。通常，当用户滚动时，是因为他们想要查看与页面上的内容不同的内容。就个人而言，我讨厌在网页上跟随我的框。:-) 但这并不意味着没有充分的理由偶尔这样做。
Very basic example (live copy):
非常基本的示例（实时复制）：
// Make sure this is in a script tag at the end of the body,
// just prior to the closing </body> tag.
function getScrollTop() {
if (typeof window.pageYOffset !== "undefined" ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (typeof d.clientHeight !== "undefined") {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById("box");
var scroll = getScrollTop();
if (scroll <= 28) {
box.style.top = "30px";
} else {
box.style.top = (scroll + 2) + "px";
}
};#box {
/* Position absolutely, 30px down from the top */
position: absolute;
top: 30px;
/* In my case I'm centering it in the window; do what you like */
margin-left: -100px;
left: 50%;
width: 200px;
/* These are just for my example */
height: 1.25em;
border: 1px solid #bbb;
text-align: center;
}<div id='box'>I'm the box</div>
<div style="height: 1000px"></div>(In my case, I'm always keeping it 2 pixels below the top, but if you don't want that you can adjust the numbers accordingly.)
（就我而言，我总是将其保持在顶部下方 2 个像素处，但如果您不希望如此，您可以相应地调整数字。）
回答by TIMEX
As you can see other people provided ready scripts, but if you want to make one your self (waste of time) [or you may want to learn].. here is a good point to start:
正如您所看到的其他人提供了现成的脚本，但是如果您想自己制作一个（浪费时间）[或者您可能想学习]..这是一个很好的起点：
var hscroll = (document.all ? document.scrollLeft : window.pageXOffset);
var vscroll = (document.all ? document.scrollTop : window.pageYOffset);
回答by red
This is an old implementation of your desired functionality, which I've used. It's one of the first scripts I wrote, so JS & jQuery knowing people will most likely vomit. I wrote it mainly due all the examples I found online were centered on moving the DIV rather than setting it to fixed, and incrementally adding to the top-margin of the box resulted in really choppy movement.
这是我使用过的所需功能的旧实现。这是我写的第一个脚本之一，所以 JS & jQuery 知道人们很可能会呕吐。我写它主要是因为我在网上找到的所有示例都集中在移动 DIV 而不是将其设置为固定，并且逐渐添加到框的顶部边缘导致非常不稳定的移动。
Basicly it changes to fixed as the specified element is a custom set margin from the top of the browser window, and stops moving down once it hits a custom offset before our footer (we wanted to constrain the followbox to not move past our sidebar space).
基本上它会更改为固定，因为指定的元素是浏览器窗口顶部的自定义设置边距，一旦它在我们的页脚之前达到自定义偏移量，它就会停止向下移动（我们希望限制跟随框不移动超过我们的侧边栏空间） .
Hope it is of any use, and if a plugin to handle this nowadays exists, you would probably be better of using it.
希望它有任何用处，如果现在有一个插件来处理这个问题，你可能会更好地使用它。
