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

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 将获得 relative 位置而不是 fixed。当您向上滚动时，它会 return 到原始设置。我尝试了不同的 CSS class 因为你可以很容易地以任何你想要的方式改变样式。

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

how to set the position of element to fixed on scroll to certain height and make it normal when not that height?

html

javascript

jquery

jquery-ui

jquery-post