How to create a navigation bar that fades in when user scrolls down? (on blogspot)

Question

Okay, total noob here. I have a blog on a blogspot platform, and I'm trying to create a navbar that fades in when the user is scrolling down. I've made my navbar in flash, put it in the right place, made it transparent and fixed etc. It is a div. I've no idea what code to use and where exactly to put it to make it fade-in on scroll down. HELP :D http://blackforestdesigns.blogspot.com

Answer 1

Add this code just before </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>

If you want to get more adventurous, make a CSS class that animates the transition:

<style type="text/css">
.sticknav {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.sticknav.is-visible {
    opacity: 1;
}
</style>

And replace the if/else above with:

if(scrollTop > 400) {
    navbar.classList.add('is-visible');
}
else {
    navbar.classList.remove('is-visible');
}