隱藏/顯示導航欄時，刷新頁面時將顯示導航欄，然后在滾動時消失

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

像<nav class="hide">這樣，將hide類添加到html文件中的<nav class="hide">

Answer 2

只需將.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中。