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


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?

What I have tried:


<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 class="nav-item">
                <a class="nav-link active" href="#features-icons">Expectations</a>
            <li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
            <li class="nav-item"> <a class="nav-link" href="#about">About</a>
            <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
            <li class="nav-item"> <a class="nav-link" href="#about">Design</a>
            <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>


.navbar {
    display: none;


$("body, html").on("scroll", function() {
    var features_top = $("#features-icon").position().top;
    var top_of_window = $(window).scrollTop();
    if (top_of_window >= features_top) {
    } else {

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

By using scrollspy and some flags.