jquery - 使用jquery将两个div同时粘贴到窗口顶部

Question

我知道这个话题之前已经在这里讨论过，但我遇到了一些已经解决的问题。我想同时将两个 div 粘贴到顶部。 (例如:当第 2 层粘在顶部时，我希望第 2 层也粘在顶部，但高度和宽度不同)目前我试图只保留一个 div，但它不起作用。

HTML

<div id="Layer1"></div>
<div id="sticky-anchor"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>

JS

jQuery(document).ready(function($) {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

function sticky_relocate() {
    var s = $('#Layer2');
    var pos = s.position();

    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;

    s.html("Distance from top:" + pos.top + "<br />Scroll position: " + window_top);

    if (window_top > div_top) {
        s.addClass('stick');
    } else {
        s.removeClass();
    }
}

CSS

#Layer2 {
    position: absolute;
    text-align: left;
    left: 0px;
    top: 276px;
    width: 950px;
    height: 57px;
    z-index: 1;
}
.stick {
    position: fixed;
    top: 0;
}

我在这里需要一些帮助，我也想知道我应该如何同时粘贴两个 div。提前致谢。

JS fiddle

Answer 1

这是因为 CSS specificity .

#id 选择器总是比 .class 选择器更重要。

替换这个

.stick {
    position: fixed;
    top: 0;
}

有了这个

#Layer2.stick {
    position: fixed;
    top: 0;
}

或者这个

.stick {
    position: fixed !important;
    top: 0 !important;
}

在这里查看全部内容 JS fiddle

附言我稍微更改了 JavaScript。