滚动时如何使 div 跟随？答案

【问题标题】：How do you make a div follow as you scroll?滚动时如何使 div 跟随？
【发布时间】：2012-07-09 16:45:54
【问题描述】：

我在左侧有一个 div，其中包括营业时间和天气。我希望该 div 根据用户滚动的方式向下和向上滚动。所以它会跟随页面上下移动。我将如何尝试？这是我的网站judystropicalgarden.com

谢谢

【问题讨论】：

How to make div follow scrolling smoothly with jQuery?的可能重复
“follow”是指它应该从字面上跟随鼠标吗？或者它应该在屏幕上保持可见，而不管滚动？

【解决方案1】：

您可以使用 CSS 属性 Fixed，或者如果您需要更精细的调整，则需要使用 javascript 并跟踪定义用户代理滚动条位置的 scrollTop 属性（0 位于顶部... x 在底部）

.Fixed
{
    position: fixed;
    top: 20px;
}

或使用 jQuery：

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});

【讨论】：

嗨，很好的解决方案。十分优雅。但对我有用的是将 javascript 版本设置为底部，即将滚动顶部值设置为固定 div 的底部值。
如果为了演示的目的是absolute 而不是固定的。
@Si8 使某些东西绝对定位并不能确保元素在视口中始终保持可见，正如 OP 的问题所要求的那样。
我无法使用 jQuery 解决方案。见jsfiddle.net/greyshark7/hf9tmr48/2
@PaulJones div 必须是可滚动的，scroll() 函数才能工作。可以在父div的css中添加overflow:scroll;。

【解决方案2】：

这篇文章很旧，但我找到了一个完美的 CSS，我想分享它。

粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置（如 position:fixed）。

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }

来源：https://www.w3schools.com/css/css_positioning.asp

【讨论】：

是的！在大多数情况下，这种现代方法取代了其他解决方案。
伟大而有用的答案 - 应该被接受，因为现在是最新的
谢谢，这正是我一直在寻找的
很好 - 非常适合我
谢谢，太好了

【解决方案3】：

使用 CSS 样式，您可以定义某物的定位方式。如果您将元素定义为fixed，它将始终保持在屏幕上的相同位置。

div
{
    position:fixed;
    top:20px;
}

【讨论】：

【解决方案4】：

您可以使用fixed CSS 位置属性来完成此操作。这个here有基础教程。

编辑：但是，IE 版本 here。

还有一个 hack，解释为 here，它展示了如何在 IE6 中完成固定定位而不影响绝对定位。您的网站针对的是哪个版本的 IE？

【讨论】：

哇，好的，谢谢大家的回答……“固定”方法在 IE 中也有效吗？

【解决方案5】：

更好的 JQuery 答案是：

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()});
});

你也可以在 scrollTop 后面加一个数字，即 .scrollTop() + 5 给它 buff。

一个很好的建议是将持续时间限制为 100 并从默认摆动变为线性缓动。

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})

【讨论】：

【解决方案6】：

position:fixed; 属性应该可以完成这项工作，我在我的网站上使用了它并且效果很好。 http://www.w3schools.com/css/css_positioning.asp

【讨论】：