滚动固定顶部的导航栏偏离页面边缘，求始终居中方案

我明白你的困扰——导航栏滚动固定到顶部后就贴到页面边缘，没法保持原本的居中状态。看了你的代码后，问题主要出在固定定位的样式设置以及导航栏的基础布局上，下面给你一步步解决的方案：

1. 修正导航栏的基础居中样式 #

你原本的nav元素虽然设置了width:100%，但没有限制最大宽度和设置自动外边距来实现居中。修改这部分CSS，让导航栏默认就保持居中：

/*---------------------- $NAVBAR basic navbar styling ----------------------*/ 
nav { 
  overflow: hidden; 
  display: block; 
  max-width: 1200px; /* 可根据你的页面需求调整这个最大宽度 */
  width: 90%; /* 用百分比实现响应式，小屏幕自动适配 */
  margin: 0 auto; /* 关键：让导航栏水平居中 */
  color: #bbb; 
  background-color: rgba(46, 46, 46, .6); 
  font-weight: bold; 
  letter-spacing: 0.025em; 
  border-radius: 5px; 
}

2. 调整固定定位的样式 #

你的.navbar-fixed类设置了width:100%，这会让固定后的导航栏直接撑满整个屏幕宽度，自然就贴到边缘了。修改这个类的样式，去掉全屏宽度，同时添加z-index避免被其他内容遮挡：

/* nav stick to top*/ 
.navbar-fixed { 
  top: 0; 
  position: fixed; /* 去掉-webkit-fixed，现代浏览器和IE都支持标准fixed定位 */
  z-index: 9999; /* 确保导航栏在最上层，不会被其他内容盖住 */
  left: 0;
  right: 0; /* 配合nav的margin:auto，保持居中状态 */
}

3. 修正HTML结构的小问题 #

你现在的代码里用a标签直接包裹li标签，这不符合HTML规范，可能会导致样式或交互的异常。应该改成li包裹a的结构：

<nav id="navbar"> 
  <ul> 
    <li><a class="nav-btn" id="gotoGenRules_btn" href="#general-rules">General Rules</a></li> 
    <li><a class="nav-btn" id="gotoNLR_btn" href="#nlr">NLR</a></li> 
    <li><a class="nav-btn" id="gotoPropRules_btn" href="#prop-rules">Prop Rules</a></li> 
    <li><a class="nav-btn" id="gotoMisc_btn" href="#misc-rules">Misc Rules</a></li> 
    <li><a class="nav-btn" id="gotoPoliceRules_btn" href="#police-rules">Police Rules</a></li> 
    <li><a class="nav-btn" id="gotoRaidingRules_btn" href="#raiding-rules">Raiding Rules</a></li> 
  </ul> 
</nav>

4. 优化JS逻辑（可选） #

为了避免重复添加类和触发动画，可以给JS加个判断，只有当导航栏还没固定时才执行动画：

(function($) { 
  "use strict"; 
  var $navbar = $("#navbar"), 
      y_pos = $navbar.offset().top, 
      height = $navbar.height(); 

  $(document).scroll(function() { 
    var scrollTop = $(this).scrollTop(); 
    if (scrollTop > y_pos + height) { 
      // 只有未添加固定类时才执行动画
      if (!$navbar.hasClass("navbar-fixed")) {
        $navbar.addClass("navbar-fixed").animate({ top: 0 }); 
      }
    } else if (scrollTop <= y_pos) { 
      $navbar.removeClass("navbar-fixed").clearQueue().animate({ top: "-48px" }, 0); 
    } 
  }); 
})(jQuery);

这样修改后，导航栏不管是默认状态还是滚动固定后，都会保持在页面中间，不会再贴到边缘啦～

内容的提问来源于stack exchange，提问作者klump