Bootstrap 4 fixed-top导航栏问题：禁止页面滚动、实现导航栏可滚动

针对你遇到的这两个导航栏问题，我整理了直接可用的解决方案，上手就能解决：

问题1：导航栏折叠时页面在后方滚动 #

这个问题的核心是导航栏展开时，页面的滚动行为没有被限制。我们可以借助Bootstrap折叠组件的内置事件，在菜单展开时给body添加禁止滚动的样式，收起时再移除这个限制。

解决方案（JS代码） #

$(document).ready(function() {
  // 监听导航栏展开事件，禁止页面滚动
  $('#navbarTogglerDemo02').on('show.bs.collapse', function() {
    $('body').css('overflow', 'hidden');
  }).on('hide.bs.collapse', function() {
    // 导航栏收起后恢复页面滚动
    $('body').css('overflow', 'auto');
  });
});

问题2：折叠导航栏内容过多无法滚动，滚动时带动页面 #

这个问题需要给折叠后的导航栏容器设置专属的滚动规则，让菜单内容在自身范围内滚动，而不是触发页面整体滚动。

解决方案（CSS代码） #

/* 仅在移动端折叠状态生效（对应navbar-expand-lg的断点） */
@media (max-width: 991px) {
  .navbar-collapse {
    max-height: calc(100vh - 56px); /* 减去导航栏头部默认高度56px，占满剩余屏幕 */
    overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  }
}

/* 保留你原有的样式 */
.navbar-nav > li > a { padding:35px!important; }
p { padding-top:1000px; /* 模拟长页面 */ }

完整整合后的示例代码 #

把上面的CSS和JS整合到你的代码中，完整代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
@media (max-width: 991px) {
  .navbar-collapse {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
}

.navbar-nav > li > a { padding:35px!important; }
p { padding-top:1000px; /* to emulate scroll */ }
</style>
<script>
$(document).ready(function() {
  $('#navbarTogglerDemo02').on('show.bs.collapse', function() {
    $('body').css('overflow', 'hidden');
  }).on('hide.bs.collapse', function() {
    $('body').css('overflow', 'auto');
  });
});
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
 <div class="container">
 <a class="navbar-brand mx-auto" href="#">
 <img src="https://loremflickr.com/320/240" width="35" height="35" alt="logo">
 <span>Logo</span>
 </a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
 <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 1</a>
 </li>
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 2</a>
 </li>
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 3</a>
 </li>
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 4</a>
 </li>
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 5</a>
 </li>
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 6</a>
 </li>
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 7</a>
 </li>
 <li class="nav-item main-nav">
 <a class="nav-link py-0 text-center" href="#">Link 8</a>
 </li>
 </ul>
 </div>
 </div>
</nav>
<p class="text-center"><strong>I am content at the bottom</strong></p>

这样两个问题就都解决了：菜单展开时页面不会在背后滚动，菜单内容过多时可以单独滚动菜单本身，不会带动页面。

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