滚动到该 div 后如何使 div 固定？

Question

滚动到 div 后，如何使 div 保持固定？我有一个 div 在页面后面，您需要滚动才能找到 div 。

如果我使用：

 .divname {
  position: fixed;
}

div 会在正常出现之前出现。也许我需要的一个很好的例子是 9gag 上的第二个广告。如果您的屏幕分辨率足够低，则在加载首页后您将看不到该广告，但在您向下滚动后，您会看到第二个广告，并且在您向下滚动时它会保持不变。

原文由 Jakov Mikić 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现在只能使用 CSS，请参阅 https://stackoverflow.com/a/53832799/1482443

---

如果有人需要 jQuery 方法，下面是几年前发布的原始答案：

我知道这仅标记为 html/css，但您不能仅使用 css 来执行此操作。最简单的方法是使用一些 jQuery。

 var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

$(window).scroll(function() {                  // assign scroll event listener

    var currentScroll = $(window).scrollTop(); // get current position

    if (currentScroll >= fixmeTop) {           // apply position: fixed if you
        $('.fixme').css({                      // scroll to that element or below it
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   // apply position: static
        $('.fixme').css({                      // if you scroll above it
            position: 'static'
        });
    }

});

http://jsfiddle.net/5n5MA/2/

原文由 Kaloyan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这在 CSS3 中是可能的。只需使用 position: sticky ，如此 处所示。

 position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;

原文由 Alexandre Aimbiré 发布，翻译遵循 CC BY-SA 4.0 许可协议