Question

我左手边有一个div，包括营业时间和天气。我想根据用户如何滚动来向下滚动该div。因此它会跟随并随页面上下移动。我该怎么做？这是我的网站judystropicalgarden.com

由于

Answer 1

您可以使用css属性Fixed，或者如果您需要更精细的内容，那么您需要使用javascript并跟踪scrollTop属性，该属性定义用户代理的滚动条位置所在的位置（0位于顶部...并且x在底部）

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

或使用jQuery：

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

Answer 2

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

编辑：但是，IE版本不支持这种方法＆lt; IE7，如果它处于标准模式，则仅在IE7中。这将在稍后详细讨论here。

还有一个hack，解释here，它说明了如何在不影响绝对定位的情况下在IE6中完成固定定位。您为什么版本的IE定位了您的网站？

Answer 3

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

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

Answer 4

该帖子很旧，但我为此找到了一个完美的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

Answer 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");
})

Answer 6

位置：固定; 属性应该完成工作，我在我的网站上使用它并且它工作正常。 http://www.w3schools.com/css/css_positioning.asp

当你滚动时如何使div成为可能？

6 个答案: