Question

我有一个名为警察的div，它有一个固定的位置。

该div的行为与问题标签（类似）相同，但在滚动页面时它会改变其位置。

我的剧本

     $(window).scroll(function()
{
    var top = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
    if (top > 40)
    {
        $(".cart, .top").fadeOut();
    }
    else
    {
        $(".cart, .top").fadeIn();      
    }
});

Answer 1

我在CODEPEN上创建了一个工作示例。在行动中更容易理解它。首先，您需要阅读滚动事件，您可以在其中对所需元素采取措施：

$(window).scroll(function() {
   currentTop = $("body").scrollTop();

   if (currentTop > 300) {
     $(".cop").addClass("copChange");
   } else {
     $(".cop").removeClass("copChange");
   }

});

在此示例中滚动超过300像素时，您的.cop div将获得relative位置而不是fixed。向上滚动时将返回原始设置。我尝试过不同的CSS类，因为您可以轻松地以任何方式更改样式。

如何在滚动到某个高度时将元素的位置设置为固定，并在不是那个高度时使其正常？

1 个答案: