Maison > php教程 > PHP开发 > le corps du texte

bootstrap监听滚动实现头部跟随滚动

高洛峰
Libérer: 2016-12-07 13:53:40
original
1480 Les gens l'ont consulté

本文实例为大家分享了bootstrap监听滚动头部跟随滚动的实现方法,供大家参考,具体内容如下

实现案例

<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<div id=&#39;menu_wrap&#39;>
 <div class=&#39;menu&#39;>
  <nav class="navbar navbar-default" role="navigation">
  <div class="container">
  <div class="navbar-header">
  <a class="navbar-brand" href="#" style="font-weight:bold">植被数据录入</a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <!-- <button type="button" class="close" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">×</span></button> -->
   <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">保存</span></button>
   <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">取消</span></button>
  </div>
 </div>
 </nav>
 </div>
</div>
</body>
Copier après la connexion

css控制样式

.menu{
 width:100%;
 z-index:99;
}
.menuFixed{
 position:fixed;
 top:0;
 left:0;
}
#menu_wrap{
 height:50px;
 width:100%;
}
Copier après la connexion

js监听

<script>
$(window).scroll(function () {
 var menu_top = $(&#39;#menu_wrap&#39;).offset().top;
 if ($(window).scrollTop() >= menu_top) {
 $(&#39;.menu&#39;).addClass(&#39;menuFixed&#39;)
 }
 else {
 $(&#39;.menu&#39;).removeClass(&#39;menuFixed&#39;)
 }
});
</script>
Copier après la connexion

导入js

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
Copier après la connexion

   

知识只有共享才能传播,才能推崇出新的知识,才能学到更多,这里写的每一篇文字/博客,基本都是从网上查询了一下资料然后记录下来,也有些是原滋原味搬了过来,也有时加了一些自己的想法,希望可以帮助到大家。


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal