Question

我有以下代码，可让div在滚动时停留在顶部：

$(window).scroll(function() {
//After scrolling 100px from the top...
if ( $(window).scrollTop() >= 72 || (w > 980)) {
    $('#div1').css('top', '0px');

//Otherwise remove inline styles and thereby revert to original stying
} else {
    $('#div1').attr('style', '');

}
});

现在，我希望一页上的两个div具有相同的行为。我尝试过：

 $('#div1' || '#div2')

但是似乎不起作用。我该如何实现？

Answer 1

要么用逗号分隔它们，如$('#div1, #div2')，要么只是添加一个类，而不是像$('.stickyDiv')这样使用id，然后

<div class="stickyDiv" id="div1></div>
<div class="stickyDiv" id="div2></div>

Answer 2

如果您的目标是滚动时将div放在顶部，则建议您使用名为position的CSS属性。

示例：Codepen

您可以详细了解here。

Answer 3

这可以通过position：sticky实现。

#div1 , #div2 {
    position: sticky;
    top: 72px;
}

通过默认，它们将表现为位置：相对。
当父元素被滚动（超过72px点）时，它们的行为类似于位置：固定。

这只会在父元素的滚动内发生。
如果希望它们相对于窗口具有粘性，请将它们放置为的直接子代。

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

多个ID的滚动功能

3 个答案: