如何创建当用户向下滚动时淡入的导航栏？(在博客上)

Question

好了，新手来了。我在一个博客平台上有一个博客，我正在尝试创建一个导航栏，当用户向下滚动时，导航栏就会淡入。我在flash中做了导航栏，把它放在正确的位置，使它透明和固定等等。它是一个div。我不知道该用什么代码，也不知道该把它放在哪里，才能让它在向下滚动时淡入。帮助:D http://blackforestdesigns.blogspot.com

Answer 1

将此代码添加到</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');
}