如何使導航欄出現在某個部分？

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/

僅當<div id="features-icon">Hola</div>從頂部開始有-1px時，才會顯示navbar 。 只要您沒有，它就不會顯示