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

时间:2015-08-03 21:55:16

标签: javascript jquery html css

我已经创建了一个页面,其中第二个导航栏在滚动时出现,并且应该在窗口位于顶部时隐藏: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();
        }
    });

});

2 个答案:

答案 0 :(得分:0)

将隐藏类添加到html文件中的导航,如<header> <img src="yo.png"> <h1 class="oo">omargonzalesdiaz.com</h1> <nav> <ul id="menusuperior"> <li class="seccion"><a href="/">Inicio</a></li> <li class="seccion"><a href="/events">Blog</a></li> <li class="seccion"><a href="/events">Dashboards</a></li> <li class="seccion"><a href="/events">Contáctame</a></li> </ul> </nav> </header>

答案 1 :(得分:0)

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