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

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 中，您希望将 class 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 或复制旧版本代码等问题。

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

Sticky Navigation Menu not sticking to the top properly

html

css

navigation

scroll

carousel