隐藏/显示导航栏时，导航栏在页面刷新时可见，然后在我滚动时消失

Question

我创建了一个页面，第二个导航栏在滚动时出现，当窗口位于顶部时应该隐藏：0。刷新页面时，导航栏是可见的，然后在滚动时消失然后出现在 scrollPos 设置出现。

如何让它在页面刷新时隐藏？

网页是www.fareastfestival.com，请帮忙看看。

这是我用过的JS代码：

$(document).ready(function() {

    var navOffset = $("nav1").offset().top;

    $("nav").wrap('<div class="nav-placeholder"></div>');
    $(".nav-placeholder").height($("nav").outerHeight());

    $(window).scroll(function(){
        var scrollPos = $(window).scrollTop(); 

        if (scrollPos >= navOffset) {
            $("nav").removeClass("hide");
            $("nav").addClass("fixed");
            $(".navlogo").show();
        } 
        else {
            $("nav").addClass("hide");
            $("nav").removeClass("fixed");
            $(".navlogo").hide();
        }
    });

});

Answer 1

只需将 .hide 类添加到您的 HTML 元素。 这是一个示例（第 7 行）：

$(document).ready(function() {

    var navOffset = $("nav1").offset().top;

    $("nav").wrap('<div class="nav-placeholder"></div>');
    $(".nav-placeholder").height($("nav").outerHeight());
    $("nav").addClass("hide");

    $(window).scroll(function(){
        var scrollPos = $(window).scrollTop(); 

        if (scrollPos >= navOffset) {
            $("nav").removeClass("hide");
            $("nav").addClass("fixed");
            $(".navlogo").show();
        } 
        else {
            $("nav").addClass("hide");
            $("nav").removeClass("fixed");
            $(".navlogo").hide();
        }
    });

});

上面的代码是动态添加类的。您也可以只添加到 HTML。

Answer 2

像<nav class="hide">这样在你的html文件中添加隐藏类到nav