63

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

谢谢

4

6 回答 6

86

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

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

或使用 jQuery：

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});
于 2012-07-09T16:50:49.997 回答
31

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

粘性元素在相对和固定之间切换，具体取决于滚动位置。它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置（如位置：固定）。

    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

于 2020-01-22T11:18:02.953 回答
16

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

div
{
    position:fixed;
    top:20px;
}
于 2012-07-09T16:50:09.637 回答
13

您可以使用fixedCSS 位置属性来完成此操作。这里有一个基本教程。

编辑：但是，IE 版本 < IE7 不支持这种方法，并且仅在 IE7 处于标准模式时才支持。此处将对此进行更详细的讨论。

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

于 2012-07-09T16:49:48.787 回答
8

更好的 JQuery 答案是：

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

您还可以在 scrollTop 之后添加一个数字，即 .scrollTop() + 5 以赋予它增益。

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

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})
于 2014-08-01T22:10:15.797 回答
6

位置：固定；财产应该做的工作，我在我的网站上使用它，它工作得很好。 http://www.w3schools.com/css/css_positioning.asp

于 2015-06-18T04:34:01.937 回答