问题:
如何让导航不显示在我的#home部分。但是,当用户向下滚动或单击“查找更多”按钮时。当用户进入“功能图标”部分时,如何为所有部分(包括该部分和下方)显示导航栏? https://github.com/ldocherty1/Unit28_Assignment1
我尝试了什么:
HTML
<nav class="navbar scrolled-nav fixed-top navbar-expand-sm bg-light">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
CSS
.navbar {
display: none;
}
JS
$("body, html").on("scroll", function() {
var features_top = $("#features-icon").position().top;
var top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
我认为它与我的代码的JS部分有关,这就是为什么我的导航栏没有显示的问题。
答案 0 :(得分:0)
您的navbar
未显示,因为您从未到达top_of_window >= features_top
有效的位置。
我在评论中更新了小提琴。立即查看https://jsfiddle.net/8o7omnm7/33/
仅当navbar
从顶部开始具有-1px时,才会显示<div id="features-icon">Hola</div>
。只要你没有它就不会显示