CODEWITHSUNDEEP
jqueryhtmlcss
user3550879
user3550879

Reputation: 3469

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'

Upvotes: 1

Views: 51

Answers (1)

Elisabeth Hamel
Elisabeth Hamel

Reputation: 178

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

Upvotes: 1

Related Questions