Question

问题：

如何让导航不显示在我的#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部分有关，这就是为什么我的导航栏没有显示的问题。

Answer 1

您的navbar未显示，因为您从未到达top_of_window >= features_top有效的位置。

我在评论中更新了小提琴。立即查看https://jsfiddle.net/8o7omnm7/33/

仅当navbar从顶部开始具有-1px时，才会显示<div id="features-icon">Hola</div>。只要你没有它就不会显示

如何让导航栏出现在某个部分？

1 个答案: