Question

我知道此主题已在此处讨论过，但我遇到了一些已经解决的问题。我想同时将两个div放在顶部。（例如：当Layer2粘在顶部时，我希望第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

P.S。我对JavaScript做了些改动。

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

1 个答案: