页面顶部的透明导航

Question

I have the following code which adds/removes a class to my navigation div when the user scrolls.

 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;
}

});

I want to add .trans-bg to #anim-nav when the user is close to the top of the screen. It has a background of white, but when it gets to the top o the screen I want it transparent as it goes over an image. However when i added it to this function wasn't reliable. Sometimes it would stay transparent, or not turn transparent.

Not sure how to add something that constantly runs to make sure if the user is near/at the top it applies.

Answer 1

Maybe this can help?

 $(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> 

Answer 2

Solution: Listen to scroll changes instead of checking for scrolls at a interval.

Example of listening to scroll at top using javaScript:

window.addEventListener('scroll', function(e) {
    if (document.body.scrollTop == 0) {
        alert("top");
    }
});