ブートストラップ・アフィックス・クラスの使用

Question

私はブートストラップ・アフィックス・クラスを使用しています。これは上部の内容です。

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
    <h1>SUBISU</h1> 
    <h3>Amazing all the way</h3> 
    <p>The first internet and coaxial cable distribution of Nepal.</p> 
</div> 

これは、上部の内容をスクロールした後、一番上に固定されるナビゲーションバーです。

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="facilities.php">Facilities</a></li> 
    <li><a href="work.php">Works</a></li> 
    <li><a href="contact.php">Contact us</a></li> 
    </ul> 
</nav> 

すべてがここ件まで罰金と私はナビゲーションバーを下にスクロールすると上部に固定されたままが、下にスクロールするときナビゲーションバー以下の内容はナビゲーションバーの下の一番上に見えるようになります。私はnavbarが完全に不透明ではないことを意味します。

これはCSSです：

.affix { 
     top: 0; 
     width: 100%; 

    } 

    .affix + .container-fluid { 
     padding-top: 70px; 
    } 

ナビゲーションバーの後にいくつかの内容：

<div class="container-fluid" style="height:1000px"> 
<div class="row"> 
    <div class="col-sm-2"> 
<table border="1" class="table table-hover table-striped"> 

<thead><tr><th> <h3>Cables Available<span class="badge badge-warning">5</span></h3></th></tr></thead> 

<tbody><tr><td> Coaxial</td></tr> 
<tr><td class="text-success"> Copper wire</td></tr><tr><td class="bg-warning"> Fiber optical cable</td></tr><tr><td class="danger"> RJ45</td></tr><tr><td> BTS cable</td></tr> 
</tbody> 
</table> 
    </div> 

Answer 1

こんにちは、あなたのコードの作業罰金私のために。私は次のコード

CSS

.affix { 
     top: 0; 
     width: 100%; 
    } 


    .affix + .container-fluid { 
     padding-top: 70px; 
    } 

HTML

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
    <h1>SUBISU</h1> 
    <h3>Amazing all the way</h3> 
    <p>The first internet and coaxial cable distribution of Nepal.</p> 
</div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="facilities.php">Facilities</a></li> 
    <li><a href="work.php">Works</a></li> 
    <li><a href="contact.php">Contact us</a></li> 
    </ul> 
</nav> 

<div class="container-fluid" style="height:1000px"> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
</div> 

を使用しました

は、コードの上に試してみて、それが動作します。