gpt4 book ai didi

jQuery - 如果 div 位于窗口顶部,添加类/样式? (粘性横幅)

转载 作者:行者123 更新时间:2023-12-01 01:00:52 26 4
gpt4 key购买 nike

所以我制作了一个粘性横幅

示例:http://jsfiddle.net/zu60j5rr/

在示例中它工作正常。但我想使用它的网站有一个顶部导航,在不同的浏览器中呈现的效果并不完全相同。所以我不能依赖“top”在所有浏览器上工作

所以我想知道的是。有什么方法可以添加类似这样的语句:如果 div 到达窗口顶部 - 添加样式来固定位置?然后如果向后滚动,删除样式?

这是我目前所拥有的,如所摆弄的:

$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('#stickyBanner').css({position: "fixed", top: "0px"});
} else {
$('#stickyBanner').css({position: "relative", top: "0px"});
}
});

谢谢!!

最佳答案

您可以稍微更改脚本,以便它可以检查粘性导航的偏移顶部值是否大于或等于窗口滚动顶部的值。基本上,如果它们相同/相等,则元素位于窗口顶部:)

这里的例子http://jsfiddle.net/zu60j5rr/1/

var stickyTop = $('#stickyBanner').offset().top;

$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('#stickyBanner').css({position: "fixed", top: "0px"});
} else {
$('#stickyBanner').css({position: "relative", top: "0px"});
}
});

关于jQuery - 如果 div 位于窗口顶部,添加类/样式? (粘性横幅),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26489360/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com