Question

我已经在这个问题上挣扎了一段时间，所以我想我会来stackoverflow寻求帮助。我的代码：http://pastebin.com/H4PHdguq

基本上，我想要实现的是当您向下滚动时，导航栏会粘到页面顶部。（变得固定）我通过词缀等方法无法实现这一点，可能是因为我做错了（？）

感谢任何帮助或意见！

注意：我已经删除了CSS样式，因为它不是那个问题的新手。也请原谅有点混乱的代码：）。

代码

<header class="masthead">
  <div class="container" style="text-align:center;">
  <h2 class="enjoy-css" style="padding-top:10px    !important;">PIXELDESIGN</h2>
  <p style="color:white; font-family:Source Sans Pro; text-shadow: 2px 1px #222; font-size:18px">TEST</p>

<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
 <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/index.html">TEST</a></li>
             <li><a href="/portfolio.html">TEST</a></li>
                <ul class="nav navbar-nav navbar-right">
                <li class="grow" style="background-color: #39D6A3 !important; box-shadow: inset 0px -3px 0px #32BF91;"><a href="/contact.php">  CONTACT ME    </a></li>


          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div><!-- /.navbar -->
  </nav>
</div>

<style>
body {
  min-height:2000px;
 }
</style>`

Answer 1

尝试使用navbar-fixed-top而不是navbar-static。

Answer 2

好吧，使用导航栏固定顶部而不是navbar-static将解决您的问题。我已经创建了一个jsfiddle来显示它并且它很简单。

<div id="nav">
  <div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/index.html">TEST</a></li>
             <li><a href="/portfolio.html">TEST</a></li>
                <ul class="nav navbar-nav navbar-right">
                <li class="grow" style="background-color: #39D6A3 !important; box-shadow: inset 0px -3px 0px #32BF91;"><a href="/contact.php">  CONTACT ME    </a></li>


          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div><!-- /.navbar -->
  </nav>
</div>

Jsfiddle：https://jsfiddle.net/mayank_shubham/jzdhvfmv/

Bootstrap导航栏固定在滚动上

2 个答案: