html - 粘性导航菜单没有正确粘在顶部

Question

我对网络技术的了解主要是 HTML 和 CSS。我使用 bootstrap 和 jQuery 来允许导航卡在滚动条上，它做了一段时间，然后在我开始添加新页面后停止。这是我的 JavaScript:

$('.carousel').carousel({
    interval: 5000 //changes the speed
})

$(document).ready(function() {
  $(window).scroll(function () {
    //if you hard code, then use console
    //.log to determine when you want the 
    //nav bar to stick.  
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

这是 my web page在哪里可以看到问题。我该怎么办？

提前致谢

Answer 1

在您的 javascript 中，您希望应用类 nav-bar-fixed到 ID 为 nav_bar 的元素.但是，您没有将该 ID 放在任何元素上。

 if ($(window).scrollTop() > 280) {
   $('#nav_bar').addClass('navbar-fixed');
 }
 if ($(window).scrollTop() < 281) {
   $('#nav_bar').removeClass('navbar-fixed');
 }

但是，当我将 ID 添加到 <nav> 时有用。它需要一些修改才能看起来不错，但它确实有效。 <nav id="nav_bar">

我猜你在创建新页面时，只是错过了添加 ID 或复制了旧版本的代码等。