How can I make my navbar appear at a certain section?

Question

Problem:

How can I make my navigation not appear on my #home section. However, when the user scrolls down or clicks on the find more button. When the user gets to the 'features-icons' section how can I make my navigation bar appear for all sections including that and below? https://github.com/ldocherty1/Unit28_Assignment1

What I have tried:

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();
    }
});

I believe it has something has to do with the JS part of my code the problem why my navbar isn't displaying.

Answer 1

Your navbar is not displaying because you never reach the point where the top_of_window >= features_top is valid.

I've updated the fiddle in the comment. Check it now https://jsfiddle.net/8o7omnm7/33/

Your navbar will be displayed only when the <div id="features-icon">Hola</div> will have -1px from top. As long as you don't have that it will not be displayed