bootstrap 3 navrbar实现置顶并滚动监听

最新推荐文章于 2021-06-03 23:34:54 发布

handsometone1982

最新推荐文章于 2021-06-03 23:34:54 发布

阅读量1.1w

点赞数

分类专栏： css & 网页技术 javascript & jquery

本文链接：https://blog.csdn.net/handsometone1982/article/details/29250861

版权

javascript & jquery 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

css & 网页技术

12 篇文章 0 订阅

订阅专栏

<style>  

.menu  
{  

    width:100%;

    z-index:1;
}  
.menuFixed  
{  
    position:fixed;  
    top:0;  
    left:0;
}  
#menu_wrap  
{  
    height:50px;  
    width:100%;  

}  

</style>

以上是用到的CSS，接下来是navbar部分代码

<div class="container">
    <div id='menu_wrap'>  
        <div class='menu'>  
             <nav class="navbar navbar-default" role="navigation">
				     <div class="container">
                    <div class="navbar-header">
					 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#"  style="font-weight:bold">温州金融IC卡</a>
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
                        <li class="hidden-xs"><a href="#unit" >活动主办单位</a></li>
						<li class="item active">
							<a href="#iccard">“芯”介绍</a>
						</li>
                        <li><a href="#hudong" >“芯”互动</a></li>
                        
						<li>
							<a href="#shop">“芯”商家</a>
						</li>
						
					</ul>
										
				</div>
				</div>
			</nav>


        </div>  
    </div>
    </div>

    <div style="padding-bottom:10px; padding-top:10px" id="unit">
    ...
    <div>
<div style="padding-bottom:10px; padding-top:10px" id="iccard">
...
<div>

在body中加入以下代码实现滚动监听。

<body  data-spy="scroll" data-target="#bs-example-navbar-collapse-1">

js代码实现屏幕滚动时，navbar置顶。

<script>
        $(window).scroll(function () {
            var menu_top = $('#menu_wrap').offset().top;
            if ($(window).scrollTop() >= menu_top) {
                $('.menu').addClass('menuFixed')
            }
            else {
                $('.menu').removeClass('menuFixed')
            }
        });  
    </script>