Question 31070 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Scroll height to hide menu – WordPress

I have this code to hide and show menu when scroll. How can i do it to appear class only of scroll >= than 500px. I have traied to ad a if (scroll >= 500) on code but it wont work.

jQuery(document).ready(function( $ ) {
// console.log($);

       var lastScrollTop = 200;

$(window).scroll(function(event){
    var st = $(this).scrollTop();
    if (st > lastScrollTop){
        $('nav').addClass('nav-off');
        $('nav').removeClass('nav-on');
    } else {
        $('nav').addClass('nav-on');
        $('nav').removeClass('nav-off');
    }
    lastScrollTop = st;

});

});

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    last part of the code note working it overtakes 1'st part, and wont respect the 500px min height to add class.

    This is the part that wont let the other to work. if i deleat it it only works at 500ps to show and to hide. The scroll to top part only should wolt when you scroll down 500px.

    var lastScroll = 0;
$(window).scroll(function (event) {
var scrollTop = $(this).scrollTop();
if (scrollTop > lastScroll) {
    $('body').addClass('nav-on');
    $('body').removeClass('nav-off');
} else if (scrollTop < lastScroll) {
    $('body').removeClass('nav-on');
    $('body').addClass('nav-off');
} else {

}
lastScroll = scrollTop;
});

  2. 0

    The Below Code Show Button while Scroll down more than 500px
    When Scroll up it hide,
    Hope its help

    Screen Capture
    Screen Capture

    var offset = 500
    $(window).on('load scroll', function () {

    if ($(window).scrollTop() > offset) {
        $('body nav').addClass('nav-on');
        $('body nav').removeClass('nav-off');

    } else if ($(window).scrollTop() < offset) {
        $('body nav').removeClass('nav-on');
        $('body nav').addClass('nav-off');


    }

});

var lastScroll = 0;
$(window).scroll(function (event) {
    var scrollTop = $(this).scrollTop();
    if (scrollTop > lastScroll) {
        $('body nav').removeClass('up');
        $('body nav').addClass('down');

    } else if (scrollTop < lastScroll) {
        $('body nav').addClass('up');
        $('body nav').removeClass('down');
    } else {

    }
    lastScroll = scrollTop;
});

    Your CSS would be using the same

    nav.nav-off {
    top: -120px;
    background: transparent;
}

nav.nav-on {
    top: 0;
}

    and you could put two more for up and down for

    nav.down {
  
}

nav.up {
   
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search