Html 滚动时如何使 div 跟随？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11399537/
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 you make a div follow as you scroll?
提问by user1165861
I have a div on the left hand side which includes the business hours and weather. I would like that div to scroll down and up according to how the user scrolls. So it would follow and move up and down with the page. How would I attempt this? This is my website judystropicalgarden.com
我在左侧有一个 div，其中包括营业时间和天气。我希望该 div 根据用户滚动的方式向下和向上滚动。所以它会跟随页面上下移动。我将如何尝试？这是我的网站judystropicalgarden.com
Thanks
谢谢
回答by Feisty Mango
You can either use the css property Fixed, or if you need something more fine-tuned then you need to use javascript and track the scrollTop property which defines where the user agent's scrollbar location is (0 being at the top ... and x being at the bottom)
您可以使用 css 属性 Fixed，或者如果您需要更微调的东西，那么您需要使用 javascript 并跟踪 scrollTop 属性，该属性定义了用户代理的滚动条位置（0 位于顶部......而 x 是在底部）
.Fixed
{
position: fixed;
top: 20px;
}
or with jQuery:
或使用 jQuery：
$('#ParentContainer').scroll(function() {
$('#FixedDiv').css('top', $(this).scrollTop());
});
回答by Arcym
Using styling from CSS, you can define how something is positioned. If you define the element as fixed, it will always remain in the same position on the screen at all times.
使用 CSS 中的样式，您可以定义某些内容的定位方式。如果您将元素定义为fixed，它将始终保持在屏幕上的相同位置。
div
{
position:fixed;
top:20px;
}
回答by SuperTron
You can use the fixedCSS position property to accomplish this. There is a basic tutorial on this here.
您可以使用fixedCSS position 属性来完成此操作。在灯架上有一个基本的教程在这里。
EDIT: However, this approach is NOT supported in IE versions < IE7, and only in IE7 if it is in standards mode. This is discussed in a little more detail here.
编辑：但是，这种方法在 IE 版本 < IE7 中不受支持，并且仅在 IE7 处于标准模式时才受支持。此处将对此进行更详细的讨论。
There is also a hack, explained here, that shows how to accomplish fixed positioning in IE6 without affecting absolute positioning. What version of IE are you targeting your website for?
还有一个 hack，在这里解释，展示了如何在 IE6 中完成固定定位而不影响绝对定位。您的网站针对的是哪个版本的 IE？
回答by Salteris
A better JQuery answer would be:
更好的 JQuery 答案是：
$('#ParentContainer').scroll(function() {
$('#FixedDiv').animate({top:$(this).scrollTop()});
});
You can also add a number after scrollTop i.e .scrollTop() + 5 to give it buff.
你也可以在 scrollTop 之后添加一个数字，即 .scrollTop() + 5 来给它 buff。
A good suggestion would also to limit the duration to 100 and go from default swing to linear easing.
一个很好的建议是将持续时间限制为 100，并从默认摆动到线性缓动。
$('#ParentContainer').scroll(function() {
$('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})
回答by BugliL
The post is old but I found a perfect CSS for the purpose and I want to share it.
这篇文章很旧，但我为此找到了一个完美的 CSS，我想分享它。
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
粘性元素在相对和固定之间切换，具体取决于滚动位置。它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它“固定”到位（如位置：固定）。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
回答by droidDEXTER
the position:fixed;property should do the work, I used it on my Website and it worked fine. http://www.w3schools.com/css/css_positioning.asp
该位置是：固定; 属性应该可以完成工作，我在我的网站上使用它并且运行良好。 http://www.w3schools.com/css/css_positioning.asp
