好的,这里的总菜鸟。 我在blogspot平台上有一个博客,我试图创建一个在用户向下滚动时淡入的导航栏。我已经在闪光灯中制作了导航栏,将其放在正确的位置,使其透明并固定等等。这是一个div。我不知道使用什么代码以及在向下滚动时将其淡入淡出的位置。帮助:D http://blackforestdesigns.blogspot.com
答案 0 :(得分:0)
在</body>
之前添加此代码。
<script>
var navbar = document.querySelector('.sticknav');
navbar.style.opacity = 0;
window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 400) {
navbar.style.opacity = 1;
}
else {
navbar.style.opacity = 0;
}
});
</script>
如果您想要更具冒险精神,请创建一个动画转换的CSS类:
<style type="text/css">
.sticknav {
opacity: 0;
transition: opacity 0.8s ease;
}
.sticknav.is-visible {
opacity: 1;
}
</style>
并将上面的if / else替换为:
if(scrollTop > 400) {
navbar.classList.add('is-visible');
}
else {
navbar.classList.remove('is-visible');
}