Question

我正在尝试为我自己的网站实现类似类型的导航样式，我在WordPress上的模板上看到了一个名为Enliven的模板（请参阅此处 - http://themezhut.com/demo/enliven/）。该模板似乎有2个不同的导航...在移动设备中它不固定在顶部并在点击时展开..当992px或更宽时，导航在顶部展开并在滚动时固定。

有人可以帮助我实现这样的导航吗？可能指出我正确的方向？我正在努力熟悉Bootstrap 3，但主要参加Bootstrap 4 ..

谢谢！：）

Answer 1

添加滚动事件侦听器可以正常工作。因此，当您滚动时，只需添加一个可以更改导航样式的函数。例如，您可以更改背景颜色，颜色，高度......

Answer 2

＆＃13;

$(document).ready(function() {
  if (document.documentElement.clientWidth > 480) {
    $("#menu").addClass("navbar-fixed-top");
  } else {
    $("#menu").removeClass("navbar-fixed-top");
  }
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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 id="menu" class="navbar navbar-inverse ">
    <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>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <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>
    </div>
  </nav>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</body>

</html>

＆＃13;

Answer 3

工作bootply链接：http://www.bootply.com/105915#

你必须使用按钮类作为按钮切换 - 折叠，用于在单击按钮时切换导航菜单和媒体查询只显示小屏幕按钮

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <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="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header navbar-right">
        <p class="navbar-text">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>


//css

body {
    padding-top:70px;
}

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Answer 4

我回答了very similar question here

使用Bootstrap，这种类型的导航栏可以使用ScrollSpy组件来“观察”滚动位置，并在滚动定位特定点时更改样式。你最终得到了2种不同的nabvar风格。

   /* navbar style once attached to the page */ 
   .affix {
         background-color: black;   
    }

    @media (min-width:768px) {
        .affix-top {
          /* initial navbar style at top */
          background-color:transparent;
          border-color:transparent;
          padding: 15px; 
        }
    }

演示：http://www.codeply.com/go/xp2fY6sVHP

移动尺寸和尺寸的不同导航栏样式桌面

4 个答案: