javascript - 如何将元素的位置设置为固定到一定高度并在不固定高度时使其正常？

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

该div的行为应与问题选项卡相同（相似），但是在滚动页面时会更改其位置。

我的剧本

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

最佳答案

我在CODEPEN上创建了一个工作示例。实际上更容易理解它。首先，您需要阅读scroll事件，您可以在其中对所需元素进行操作：

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

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

});

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