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

Question

我有一个名为 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();      
    }
});

Answer 1

我已经在CODEPEN上创建了一个工作示例。在行动中更容易理解。首先，您需要读取滚动事件，您可以在其中对所需的元素执行操作:

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

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

});

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