Javascript 如何在向下滚动时修复可见和禁用导航栏

我正在设置一个新的引导网页，该网页顶部包含导航栏，中间包含滑块，底部包含两部分内容。如何设置导航栏在顶部滚动时可见，在滑块区域隐藏导航栏，以及在内容上重新可见导航栏

<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>info@mysite.com</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>

现在，当我向下滚动时，导航栏是可见的，但对于整个页面，我只希望内容部分可见，而不是滑块部分可见

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

            }
        }); 
    };

};