我希望我的导航栏在我向下滚动时消失并在我向上滚动时出现。导航栏是固定的。怎么了？

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

如何解决这个问题？ 当我滚动时，导航栏实际上固定在同一个 position 上，而不是被隐藏。

Answer 1

用您的导航栏替换 h1 标签并将 id 设置为您的导航栏并添加 css

 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>

我希望我的导航栏在我向下滚动时消失并在我向上滚动时出现。导航栏是固定的。怎么了？

问题描述

1 个解决方案

解决方案1
0 2020-07-14 12:23:20

我希望我的导航栏在我向下滚动时消失并在我向上滚动时出现。 导航栏是固定的。 怎么了？

问题描述

1 个解决方案

解决方案1 0 2020-07-14 12:23:20

我希望我的导航栏在我向下滚动时消失并在我向上滚动时出现。导航栏是固定的。怎么了？

解决方案1
0 2020-07-14 12:23:20