Question

我试图将固定的底部导航栏对齐以固定顶部导航栏。我首先尝试在数据属性中使用偏移选项，然后我选择使用不同的格式。我已经尝试过调整标题大小，但担心图片在移动视图中看起来不合适。

似乎无法在2个像素内实现最平滑的过渡。例如。 https://www.aspiration.com/

的JavaScript

$(document).ready(function() {
    $('#nav').affix({
          offset: {
            top: $('header').offset().top
          }
    });
});

CSS

header {
    height:630px;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
}

HTML

<body id="home">
  <header>
    <section>
      <img>
    </section>
  </header>

  <!-- Begin Navbar -->
  <div id="nav">
    <div class="navbar navbar-default navbar-static">
      <div class="container">
        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="glyphicon glyphicon-bar"></span>
          <span class="glyphicon glyphicon-bar"></span>
          <span class="glyphicon glyphicon-bar"></span>
        </a>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Link</a>
            </li>
            <li><a href="#">Link</a>
            </li>
          </ul>
          <ul class="nav pull-right navbar-nav">
            <li>
              <form class="navbar-form">
                <input type="text" class="form-control" placeholder="Search">
                <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
                </button>
              </form>
            </li>
            <li>
              <a href="#"><i class="glyphicon glyphicon-flag"></i> <span class="badge">2</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- /.navbar -->
  </div>

  <section>
    BELOW the navbar
    <img>
  </section>

如何使最平滑的词缀到底部导航栏？

0 个答案: