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

Question

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

谢谢

Answer 1

您可以使用固定的css属性,或者如果您需要更精细的东西,那么您需要使用javascript并跟踪scrollTop属性,该属性定义用户代理的滚动条位置所在的位置(0位于顶部...并且x为在底部)

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

或者使用jQuery:

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

Answer 2

这篇文章很旧，但我为此找到了一个完美的 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

Answer 3

您可以使用fixedCSS position属性来完成此操作.在灯架上有一个基本的教程在这里.

编辑:但是,在IE版本<IE7中不支持此方法,并且只有在IE7中处于标准模式时才支持此方法.这是在一个小更详细的讨论在这里.

此处还介绍了一个hack,它显示了如何在不影响绝对定位的情况下在IE6中完成固定定位.您为什么版本的IE定位到您的网站？

Answer 4

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

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

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