我创建了一个页面,其中第二个导航栏在滚动时出现,并且当窗口位于顶部时应隐藏: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();
}
});
});
最佳答案
只需将 .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。
关于javascript - 隐藏/显示导航栏时,刷新页面时导航栏可见,然后滚动时导航栏消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31797415/