如何根据滚动位置淡入和淡出导航栏

Question

I have a vertical navbar that I want to appear, and slowly fade in, when the user scrolls below the header. Likewise, I want the navbar to disappear, and slowly fade out, if the user scrolls onto the header. This is my current function:

    $(window).scroll(function() {
        var scrollPos = $(window).scrollTop();
        if (scrollPos < 650) {
            $('.navbar').fadeOut(4000);
        } else {
            $('.navbar').fadeIn(4000);
        }
    });

The issue with this is that when I scroll below the header (or specifically a position of 650), the navbar quickly appears at full opacity, slowly fades out, then slowly fades back in. When I scroll onto the header, it just quickly disappears. How do I fix this to get the desired behavior?

Answer 1

Changed it to use css transition and also added a slight debounce for the scroll event. Stone the markup from @Adriani6 's fiddle, :P

 (function(){ var timeout; var $window = $(window); var $navbar = $('.navbar'); $window.on('scroll', function(e){ clearTimeout(timeout); timeout = setTimeout(function(){ if ($window.scrollTop() < 650) { $navbar.removeClass('hide'); } else { $navbar.addClass('hide'); } }, 100); }); }()); 

 body{ height: 12000px; } .navbar{ height: 100px; width: 800px; background-color: green; position: fixed; transition: opacity 4s; opacity: 1; } .navbar.hide { opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='navbar'></div> 

Answer 2

You should make sure to have .navbar hidden by default, giving it this CSS

.navbar {
  display: none;
}

Then it should fade in upon reaching that scroll position without that flash.