I want my navbar to disappear when I scroll down and appear when I scroll up. The navbar is fixed. What is wrong?

Question

var nav_offset_top = $('.header_area').height()+50;
function navbarFixed(){
    if ( $('.header_area').length )
    {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            if (scroll >= nav_offset_top ) {
                $(".header_area").addClass("navbar_fixed");
            } else {
                $(".header_area").removeClass("navbar_fixed");
            }
        });
    };
};
navbarFixed();

How to fix this? when I scroll, the navbar is actually fixed on the same position instead of getting hidden.

Answer 1

Replace h1 tag with your navbar and set id to your navbar and add css as well

 window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) { document.getElementById("m-id").className = "test"; } else { document.getElementById("m-id").className = ""; } }

 body{ height:1500px; }.test { background-color: yellow; display:none; }

 <,DOCTYPE html> <html lang="en"> <head> <title>nav-disappear</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> </head> <body> <h1 id="m-id" style="position:fixed">This will be your Navbar</h1> <p>scroll down to see magic in navbar</p> </body> </html>

I want my navbar to disappear when I scroll down and appear when I scroll up. The navbar is fixed. What is wrong?

Question

1 answers

solution1
0 2020-07-14 12:23:20

I want my navbar to disappear when I scroll down and appear when I scroll up. The navbar is fixed. What is wrong?

Question

1 answers

solution1 0 2020-07-14 12:23:20

solution1
0 2020-07-14 12:23:20