user3550879 user3550879 - 4 months ago 8
CSS Question

resetting a function for responsive

I have the following code which adds/removes .nav-up and .nav-down based on scrolling events except on screens <768px

script

function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;

if (st > lastScrollTop && st > navbarHeight ) {

// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');

} else {

// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
}


html

<nav id="s-nav" class="nav-down"> .... </div>


css

#s-nav { position: fixed; }

#s-nav.nav-up { top: -75px; }

@media screen and (max-width: 768px) {

#s-nav.nav-up { top: 0; }
}


However when going from mobile to screen size (responsive) screen sizing the menu 'goes up' as if the window was scrolled. I want to 'reset' the function so that when it's screen size I remains 'down'

Answer

You could just add a line in which you set the class you want when $(window).width() <= 768 :

function hasScrolled() {
    if($( window ).width() > 768) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st) <= delta)
            return;

        if (st > lastScrollTop && st > navbarHeight ) {

            // Scroll Down
            $('#s-nav').removeClass('nav-down').addClass('nav-up');

        } else {

            // Scroll Up
            if (st + $(window).height() < $(document).height()) {
                $('#s-nav').removeClass('nav-up').addClass('nav-down');
            }
         }
    }else{
        $('#s-nav').removeClass('nav-up').addClass('nav-down');
    }
    lastScrollTop = st;
}