我有以下代码,它在用户滚动时向我的导航 div 添加/删除一个类。
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 100);
function hasScrolled() {
if ($(window).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta) {
return;
}
if (st > lastScrollTop && lastScrollTop >= 0 && st > 0) {
$('#anim-nav').removeClass('nav-down').addClass('nav-up');
} else {
$('#anim-nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
});
我想在用户靠近屏幕顶部时将 .trans-bg 添加到 #anim-nav。它有白色背景,但当它到达屏幕顶部时,我希望它在图像上透明。但是,当我将它添加到此功能时并不可靠。有时它会保持透明,或不透明。
不确定如何添加持续运行的内容以确保用户是否接近/位于应用的顶部。
最佳答案
也许这能帮上忙?
$(window).on('scroll', function () {
if ($(window).scrollTop() > 10) {
$('body').addClass('scrolled');
} else {
$('body').removeClass('scrolled');
}
});
body {
background: url("https://www.toptal.com/designers/subtlepatterns/patterns/christmas-black.png");
height: 3000px;
}
.scrolled .header {
background-color: rgba(255, 255, 255, .8)
}
.header {
background-color: #fff;
height: 80px;
position: fixed;
left: 0;
top: 0;
right: 0;
transition: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header"></header>
关于javascript - 页面顶部的透明导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49044723/