検索

ホームページ >php教程 >PHP开发 >ブートストラップはスクロールを監視して、頭部追従スクロールを実装します。

ブートストラップはスクロールを監視して、頭部追従スクロールを実装します。

高洛峰
高洛峰オリジナル
2016-12-07 13:53:401490ブラウズ

この記事の例では、スクロールを追跡するブートストラップ監視スクロールヘッドの実装方法を共有していますので、具体的な内容は次のとおりです

実装事例

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

CSSコントロールスタイル

jsモニタリング

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

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

共有することによってのみ知識が広がり、新しい知識が促進され、さらに多くのことを学ぶことができます。ここに書かれたすべてのテキスト/ブログは基本的にインターネットからクエリされます。情報を見て、一部はそのまま移行し、時には私自身のアイデアを追加して、皆さんのお役に立てれば幸いです。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JS+CSS3でクールなポップアップエフェクトを作成次の記事：JS+CSS3でクールなポップアップエフェクトを作成

関連記事

続きを見る