粘性导航菜单未正确粘在顶部

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 或复制了旧版本的代码等。