我知道这个话题之前已经在这里讨论过,但我遇到了一些已经解决的问题。 我想同时将两个 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。 提前致谢。
最佳答案
这是因为 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。
关于jquery - 使用jquery将两个div同时粘贴到窗口顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29950039/