Question

我正在使用bootstrap词缀类。这是顶部的内容。

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

此处一切正常，当我向下滚动时，导航栏仍保持固定在顶部，但当向下滚动时，导航栏下方的内容将在导航栏下方的顶部显示。我的意思是导航栏不是完全不透明的。

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

尝试上面的代码，它会起作用。

使用bootstrap词缀类

1 个答案: