javascript

我有一个使用 Bootstrap 的带有导航栏的网页。我希望在向下滚动网页时导航栏固定在网页顶部。

但是我的导航栏无法固定在顶部。它变成了静态。

下面是我的代码。我该怎么做？

<!DOCTYPE html>
<html>
    <head>
        <title>About Me</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet">

        <script type="text/javascript">
    /* affix the navbar after scroll below header */
$('#nav').affix({
      offset: {
        top: $('header').height()-$('#nav').height()
      }
}); 

/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })

/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
  $('body,html').animate({scrollTop:0},1000);
})

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700);
})

</script>

        <style>
        @import url(http://fonts.googleapis.com/css?family=Kreon:400,700);

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  -webkit-font-smoothing: antialiased;
  font: normal 14px arial,sans-serif;
}

.row {
  margin-left:0px;
  margin-right:0px;
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
  margin-top:50px;
  padding-top:20px;
  padding-bottom:20px;
}


/* Custom page CSS
-------------------------------------------------- */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}

#footer {
  background-color:#414141;
}

#footer a {
  color:#efefef;
}

h1,h2,h3,h4 {
  font-family: 'Kreon', serif;
  vertical-align:middle;
}

header {
  background: #f16251;
  height:550px;
  color:#000000;
}

header h1,header h2,header h3 a,header a,header a:hover {
  color:#101010;
  font-weight:800;
  text-decoration:none;
}

header h3 {
  font-family: 'Kreon', serif;
  background: #ffcc33;
  padding:10px;
  border-radius:3px;
  font-size:34px;
  padding:12px 10px 6px 10px;
}

header .dropdown-menu {
  top:74px;
  background: #ffcc33;
  border-width:0;
}

h1 {
  font-size:50px;
}

#nav {
  width: 100%;
  position:static;
  top:-32px;
}

#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
   -webkit-transition: all .6s ease-in-out;
}

#footer > .container {

}

@media (min-width: 767px) {
  .navbar-nav.nav-justified > li{
      float:none;
  }
}
.navbar-nav {
  margin: 1px 1px; 
}  

/* customize nav style */
.navbar-custom {
    background-color: #2e2e2e;
    font-weight:700;
    text-transform:uppercase;
    border-width:0;
}
.navbar-custom  .navbar-nav>li>a {
    color: #ddd;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a  {
    background-color: #000;
}
.navbar-custom .dropdown-menu{
    right:0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
    border-top-color: #999;
    border-bottom-color: #999;
}

.navbar-collapse.in { /*3.0.2 bug workaround*/
    overflow-y: visible;
}

.navbar-toggle {
    outline:0;
}

.divider {
    height:100px;
}

.panel {
    border-width:0;
}

@media (max-width: 768px) {
    header {
        height: 95px;
    }
}

#map-canvas {
    width: 100%; 
    height: 300px;
    margin: 0;
    padding: 15px;
}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #ffcc33;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 


section {
  color: #ffffff;
  min-height: 400px;
  height: auto !important;
  height: 100%;
  padding-top:100px;
}

.bg-4 {
    padding-top:30px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,0.2)),to(rgba(255,255,255,0)), color-stop(1,#000));
}

        </style>
    </head>
    <body>

<!-- Wrap all page content here -->
<div id="wrap">

<header class="masthead">
    <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1><a href="#" title="Bootstrap Template">Testing Navigation</a>
          <p class="lead">{Using Bootstrap}</p></h1>
      </div>
    </div>
    </div>
</header>


<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
    <div class="container">
      <div class="navbar-header">
        <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="collapse navbar-collapse">
        <ul class="nav navbar-nav nav-justified">
          <li><a href="#">Home</a></li>
          <li><a href="#section2">About</a></li>
          <li><a href="#section3">My Skills</a></li>
          <li class="active"><a href="#section1"><strong>Education</strong></a></li>
          <li><a href="#section4">Portfolio</a></li>
          <li><a href="#section5">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container -->
</div><!--/.navbar -->

<!-- Begin page content -->
<div class="divider" id="section1"></div>

<div class="container">
  <div class="col-sm-10 col-sm-offset-1">
    <div class="page-header text-center">
      <h1>Testing</h1>
    </div>

    <p class="lead text-center">
      Testing
    </p>
    <p class="text-center">
      Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
    </p>
  </div>
</div>

        <!-- JavaScript placed at the end of the document so the pages load faster -->
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

最佳答案

您可以动态设置 navbar-fixed-top 样式以保持导航栏固定在顶部。

这段代码在导航栏到达窗口上限时添加需要的类。

编辑

昨晚累了，没能把代码打磨完。这是最终的解决方案。我应该澄清一下，我没有看过您的代码，而是从头开始。

测试于:

歌剧 24.0
Safari 5.1.7(在 Windows 上)
火狐 31.0
Chrome 36
Chrome 36 - 移动仿真

// assets
var win = $(window);
var nav = $('#nav');
// this element fills the space normally occupied by the navigation bar when becomes fixed.
var navproxy = $('#navproxy');  
var body = $('body');
var topdiv = $('#topdiv');

// put navbar at bottom, by setting height of topbanner
function setupTopdiv(event) {
    topdiv.height(win.height() - nav.height());
    navproxy.height(nav.outerHeight(true));
    // trigger scroll
    win.scroll();
};

// setup topdiv
setupTopdiv();

// On resize, setup toolbanner again
win.on('resize', setupTopdiv);

// On scroll, check for fix navbar
win.on('scroll', function () {
    var bh = win.height();
    var sh = nav.height();
    var st = win.scrollTop();
    if (st > bh - sh) {
        nav.addClass("navbar-fixed-top");
        // this element fills the space normally occupied by navbar
        navproxy.removeClass("hidden");
    } else {
        nav.removeClass("navbar-fixed-top");
        navproxy.addClass("hidden");
    }
});

JSFIDDLE

JSFIDDLE SHOW

关于javascript - Bootstrap 滚动时固定导航栏在顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25698148/

javascript - Bootstrap 滚动时固定导航栏在顶部

编辑

JavaScript

上一篇：javascript - 按 2 个属性对对象数组进行排序

下一篇：javascript - 减少来自客户端的第三方异步调用次数