Linked Questions

Popular Questions

How To Fix Visible and Disable navbar on scrolling down

Asked by At

I'm setting up new bootstrap web page that contains navbar on the top and slider in middle and 2 sections of content on bottom how I can set a navbar visible when scroll on the top and hide navbar on slider area also re visible navbar on content

<nav class="navbar navbar-default header_aera" id="main_navbar">

 <div class="container">
        <ul class="nav navbar-nav top_nav">
            <li><a href="#"><i class="fa fa-phone"></i>+00 (0) 00 000 0000</a></li>
            <li><a href="#"><i class="fa fa-envelope-o"></i>[email protected]</a></li>
            <li><a href="#"><i class="fa fa-clock-o"></i>Sun - Thu 08:00 - 17:00</a></li>
        </ul>
</div>
</nav> 


<section class="slider_area row m0">
    <div class="slider_inner">
    <p>this is slider area</p>
</div>
</section>



<section class="professional_builder row">
    <div class="container">
<p>this is first section area</p>
 </div>
</section>



<section class="professional_builder row">
    <div class="container">
<p>this is second section area</p>
 </div>
</section>

also I tried this Jq Function

 function mainNavbar(){
    if ( $('#main_navbar').length ){ 
         $('#main_navbar').affix({
            offset: {
                top: 10,                                
                bottom: function () {
                    return (this.bottom = $('.footer').outerHeight(true))
                },

            }
        }); 
    };

};

now when I scrolling down the navbar is visible but for whole page I want only visible for content sections not for slider section

Related Questions