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

Question

我正在设置新的引导程序页面，该页面的顶部包含导航栏，中间包含滑块，底部包含2部分内容，当顶部滚动并隐藏滑块区域的导航栏时，如何设置导航栏也可见导航栏上的内容

<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>

我也尝试过这个Jq函数

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

            }
        }); 
    };

};

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