Scroll height to hide menu-CodePudding

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;

});

});

CodePudding user response：

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

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

    if ($(window).scrollTop() > offset) {
        $('.BackToTopBtn').addClass('show');
        $('.BackToTopBtn').removeClass('hide');

    } else if ($(window).scrollTop() < offset) {
        $('.BackToTopBtn').removeClass('show');
        $('.BackToTopBtn').addClass('hide');


    }

});

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

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

    }
    lastScroll = scrollTop;
});

CodePudding user response：

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