Bootstrap+jQuery实现导航栏固定在顶部的示例教程(页面滚动时带滑出的过渡动画)

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。我们在做页面导航的时候可能的需求是--实现导航栏固定在顶部，并且当页面滑动时带过渡动画效果，今天就给大家分享一下如何利用Bootstrap来制作一个当页面滚动时顶部导航栏动画向下滑出，然后固定的效果实现。还是按照惯例，先贴出实现的代码。 1.HTML页面代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Bootstrap实现导航栏固定在顶部的示例教程(页面滑动时带过渡动画)</title>
  <meta charset="utf-8" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <link href="Content/site.css" rel="stylesheet" />
  <script src="Scripts/jquery-1.9.1.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
  <script src="Scripts/main.js"></script>
</head>
<body>
  <div class="header-bar-container">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-header">
          <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <span class="sr-only">导航栏切换</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">示例教程</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#contact">联系我们</a></li>
            <li class="dropdown">
              <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">菜单列表<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">订单列表</a></li>
                <li><a href="#">我的消息</a></li>
                <li><a href="#">系统设置</a></li>
                <li class="divider" role="separator"></li>
                <li class="dropdown-header"></li>
                <li><a href="#">修改密码</a></li>
                <li><a href="#">退出系统</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">帮助中心</a></li>
            <li><a href="../navbar-static-top/">问题反馈</a></li>
            <li class="active"><a href="./">联系客服<span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
  </div>
  
  <div class="container">
    <div class="main-container">
      <div class="jumbotron">
        <h1>Bootstrap实现导航栏固定在顶部的示例教程</h1>
        <p>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。</p>
        <p>
          <a role="button" href="http://getbootstrap.com/" class="btn btn-lg btn-primary">了解更多关于Bootstrap »</a>
        </p>
      </div>
    </div>
  </div>
</body>
</html>

2.CSS样式表：

.jumbotron h1 {
  font-size: 30px;
}

.header-bar-container.fixed {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.header-bar-container {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  min-height: 36px;
  padding:0;
  z-index: 999;
  border-radius:0;
}
  .header-bar-container .navbar {
  margin-bottom:0;
  }
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #333;
  color: #fff;
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  background-color: #333;
  color: #fff;
}

.main-container {
  margin-top:50px;
  min-height: 1500px;
}

3.JS代码：

$(function () {
  var topbar = $('.header-bar-container');

  //fixed navigation bar to top --PC

  if (topbar.is('*')) {

    var elem = $('.jumbotron');

    var offset = elem.offset();

    var leftValue = offset.left;

    var topValue = offset.top + 100;

    var width = elem.width();

    var topbarHeight = topbar.height();

    var stickyDiv = '<div class="sticky-placeholder" style="height:' + topbarHeight + 'px"></div>';

    $(window).scroll(function (event) {

      var y = $(this).scrollTop();

      if (y >= topValue) {

        if (topbar.hasClass('fixed')) {

        } else {

          topbar.addClass('fixed').addClass('sticky');

          $('#page header').prepend(stickyDiv);

          topbar.css({

            top: '-' + topbarHeight + 'px',

            width: '100%'

          });

          topbar.animate({

            top: '0'

          }, 500, function () {

          });

        }

      } else {

        if (topbar.hasClass('sticky')) {

          topbar.removeClass('sticky');

          topbar.animate({

            top: '-' + topbarHeight + 'px'

          }, 100, function () {

            $('.sticky-placeholder').remove();

            topbar.removeClass('fixed');

          });

          //topbar.fadeOut('fast', function () {

          //  topbar.fadeIn('fast');

          //});

        }

      }

    });

  }

});

实现过程中没有什么太难的地方，关键的还是实现的思路。 查看即时效果请点击-> 演示效果 如需下载Bootstrap实现导航栏固定在顶部的示例教程(页面滑动时带滑出的过渡动画)的示例代码，请点击这里>> 如果你有更好的实现方式，欢迎反馈交流。

Bootstrap+jQuery实现导航栏固定在顶部的示例教程(页面滚动时带滑出的过渡动画)

发表评论