ブートストラップウェブページをスクロールダウンするときにナビゲーションバーを上にスティックする方法

私はブートストラップ3.3.7-distを使用しています。誰もWebページをスクロールするときにナビゲーションバーを上にスティックする方法を知っていますか？助けてください。ブートストラップウェブページをスクロールダウンするときにナビゲーションバーを上にスティックする方法

ここにHTMLコードがあります。

<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav"> 
    <li><a href="index.html">Home Page</a></li> 
    <li><a href="#business_register">Register</a></li> 
    <li class="dropdown"> 

     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Management <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#upload_product">Upload</a></li> 
     <li><a href="#sort_product">Sorting</a></li> 
     <li><a href="#permission_management">Permission</a></li> 
     <li><a href="#communicate">Communication</a></li> 
     <li><a href="#basic_information">Information</a></li> 
     </ul> 
    </li> 

    </ul> 

</div>

出典

2017-01-10 Pui.F

これは必要なものですか？コンテンツだけでなくメニューをスクロールします。

#content{ 
 
    height: 500px; 
 
    overflow: scroll; 
 
} 
 

 
body{ 
 
    overflow: hidden; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </head> 
 
<body> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
<div id="content"> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p><p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p><p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
<p>sadsad</p> 
 
</div> 
 
</body> 
 
</html>

出典

2017-01-10 04:15:22 ThinhLe

ID番号のナビゲーションバー静的トップを試してみて、テンプレートがどのようにブートストラップニーズそれ

getbootstrap.com/components/#navbar-static-top

ネストされていることを確認

出典

2017-01-10 04:16:28 Polycoding

ブートストラップウェブページをスクロールダウンするときにナビゲーションバーを上にスティックする方法

答えて

関連する問題