导航栏导致页面右侧出现额外空白，调整配置破坏吸顶导航功能怎么办

页面右侧出现留白缝隙的根因 #

• 未全局配置盒模型规则，元素的padding、border会额外增加总宽度，导致部分元素宽度超出视口，撑出横向滚动空间，产生右侧留白。
• 代码中的.row类如果是来自Bootstrap等前端框架，默认带有左右-15px的负边距，没有放在带对应15px左右内边距的.container/.container-fluid容器内时，会横向撑出父容器，引发溢出留白。

设置overflow或max-width:100%后吸顶导航失效的原因 #

你当前的滚动事件绑定在document上，当给html/body标签设置overflow-x: hidden、且html/body同时配置了height: 100%时，滚动容器会从默认的document变为body，绑定在document上的滚动事件无法被触发，自然无法切换吸顶样式，导致功能失效。

解决代码 #

1. 全局样式重置，解决宽度溢出问题

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

2. 修改滚动监听对象，兼容滚动容器变更

$(function () {
  // 把监听对象换成window，不受滚动容器变更影响
  $(window).scroll(function () {
    var $nav = $(".nav");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

3. 若使用Bootstrap类，给.row补外层容器

<header>
  <div class="container-fluid">
    <div class="row">
      <!-- 保持原有导航代码不变 -->
      <div class="navigation">
        <nav>
          <ul class="nav">
            <li><a class="smoothscroll"  href="#home" title="">HOME</a></li>
            <li><a class="smoothscroll"  href="#beats" title="">BEATS</a></li>
            <li><a class="smoothscroll"  href="#licenses" title="">LICENSES</a></li>
            <li><a class="smoothscroll"  href="#videos" title="">VIDEOS</a></li>
            <li><a class="smoothscroll"  href="#services" title="">SERVICES</a></li>
            <li><a class="smoothscroll"  href="#contact" title="">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

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