Question

我想在固定导航栏之前在顶部写下网站名称和标语。我有这个固定的导航栏，但是当我写网站标题和口号时，导航栏仍然位于顶部。

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">My top 5 music</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="nirvana.php">Nirvana</a></li>
            <li><a href="gnr.php">Guns N'Roses</a></li> 
            <li><a href="beatles.php">The beatles</a></li> 
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

我的尝试与this

完全相同

Answer 1

只需添加导航顶部的分区即可。所以你基本上可以这样做。

HTML：

<div id="slogan">Slogan here</div>
<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">My top 5 music</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="nirvana.php">Nirvana</a></li>
            <li><a href="gnr.php">Guns N'Roses</a></li> 
            <li><a href="beatles.php">The beatles</a></li> 
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

CSS：

.navbar-fixed-top {
  top: 20px;
  }

  #slogan {
  top: 0;
  position: fixed;
  }

fiddle

Answer 2

这样的事情：JSFiddle

我刚刚在原版上方添加了另一个navbar并将原始版本向下移动

<强> HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <h3>Logo</h3>
    </div>
</nav>

<nav class="navbar navbar-inverse navbar-fixed-top navbar-nav">
  ...
</nav>

<强> CSS

.navbar-nav {
    top: 50px;
}

Answer 3

要在示例链接中实现效果，您最初可以将标题设置为在css中具有位置：relative，然后添加然后将其更改为位置：在用户滚动超过屏幕上的某个点时修复，例如

<强> HTML：

<div class="site-name">Site name</div>
<div class="nav-bar">Nav bar</div>

<强> CSS：

.nav-bar {
    position: relative;
}
.nav-bar.open {
    position: fixed;
}

<强> JS：

var scrollingNav = function() {
    if ($(window).scrollTop() >= 50) { 
        $('.nav-bar').addClass('open');
    }
    else {
        $('.nav-bar').removeClass('open');
    }
};

$(window).scroll(function () {
    scrollingNav();
});

示例：https://jsfiddle.net/s5pwu3cj/1/

在固定导航栏之前在顶部写东西

3 个答案: