我们正在尝试在滚动到达时将页面的导航栏固定到视口的顶部，并且还要防止它越过页脚。我们试图通过affix（Bootstrap插件）来实现它，但它似乎没有排序任何效果。你能提一些建议吗？
这是侧边栏的html：
<div id="sidebar-wrapper" class="affix-top" data-spy="affix-top" data-offset-top="250">
<nav id="spy">
<ul class="sidebar-nav nav">
<li>
<a href="#anchA" data-scroll>
<span class="fa fa-anchor solo selected">A</span>
</a>
</li>
<!--
… <li> elements for letters A-to-Z here
-->
</ul>
</nav>
</div>
答案 0 :(得分：1)
如果我的要求是正确的，那么请填写以下示例。 没有所有奇特的东西，它显示了你的布局的可能核心结构。
几个笔记：
#wrapper有一个.d-flex类，因此更容易定位/调整侧边栏和内容div。.sticky-top上的#spy，侧边栏会粘到顶部。.page-content节点已使用.container-fluid类进行了扩展，以正确包装.row元素。<body>本身。这允许删除您的一部分JavaScript。 （这需要侧栏中链接上的.nav-link类。）
$(document).ready(function() {
$('.nav-link').on('click', function(event) {
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
});#sidebar-wrapper {
/* Simple sizing of sidebar from one property */
width: 250px;
background: #000;
}
.sidebar-nav li {
/* Rendering <li>-s into 2 columns */
flex: 0 0 50%;
max-width: 50%;
text-align: right;
}
.nav-link {
color: #999999;
}
/* .active is added by scrollspy */
.nav-link.active {
color: red;
background: yellow;
}
.well {
/* Just to mimic content */
height: 50vh;
}<body data-spy="scroll" data-target="#spy" data-offset="0">
<div id="header" style="height: 400px; background: red;">
<h1>header</h1>
</div>
<div id="wrapper" class="d-flex">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy" class="navbar sticky-top">
<ul class="sidebar-nav nav">
<li><a class="nav-link" href="#anchA"><span class="selected">A</span></a></li>
<li><a class="nav-link" href="#anchB"><span>B</span></a></li>
<li><a class="nav-link" href="#anchC"><span>C</span></a></li>
<li><a class="nav-link" href="#anchD"><span>D</span></a></li>
<li><a class="nav-link" href="#anchE"><span>E</span></a></li>
<li><a class="nav-link" href="#anchF"><span>F</span></a></li>
<li><a class="nav-link" href="#anchG"><span>G</span></a></li>
<li><a class="nav-link" href="#anchH"><span>H</span></a></li>
<li><a class="nav-link" href="#anchI"><span>I</span></a></li>
<li><a class="nav-link" href="#anchJ"><span>J</span></a></li>
<li><a class="nav-link" href="#anchK"><span>K</span></a></li>
<li><a class="nav-link" href="#anchL"><span>L</span></a></li>
<li><a class="nav-link" href="#anchM"><span>M</span></a></li>
<li><a class="nav-link" href="#anchN"><span>N</span></a></li>
<li><a class="nav-link" href="#anchO"><span>O</span></a></li>
<li><a class="nav-link" href="#anchP"><span>P</span></a></li>
<li><a class="nav-link" href="#anchQ"><span>Q</span></a></li>
<li><a class="nav-link" href="#anchR"><span>R</span></a></li>
<li><a class="nav-link" href="#anchS"><span>S</span></a></li>
<li><a class="nav-link" href="#anchT"><span>T</span></a></li>
<li><a class="nav-link" href="#anchU"><span>U</span></a></li>
<li><a class="nav-link" href="#anchV"><span>V</span></a></li>
<li><a class="nav-link" href="#anchW"><span>W</span></a></li>
<li><a class="nav-link" href="#anchX"><span>X</span></a></li>
<li><a class="nav-link" href="#anchY"><span>Y</span></a></li>
<li><a class="nav-link" href="#anchZ"><span>Z</span></a></li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content inset container-fluid">
<div class="row">
<div class="jumbotron text-center">
<p>This glossary is a super lolcat.</p>
</div>
</div>
<div class="row">
<div class="col-md-12 well">
<legend id="anchA" class="orange-title">A</legend>
</div>
<div class="col-md-12 well">
<legend id="anchB" class="orange-title">B</legend>
</div>
<div class="col-md-12 well">
<legend id="anchC" class="orange-title">C</legend>
</div>
<div class="col-md-12 well">
<legend id="anchD" class="orange-title">D</legend>
</div>
<div class="col-md-12 well">
<legend id="anchE" class="orange-title">E</legend>
</div>
<div class="col-md-12 well">
<legend id="anchF" class="orange-title">F</legend>
</div>
<div class="col-md-12 well">
<legend id="anchG" class="orange-title">G</legend>
</div>
<div class="col-md-12 well">
<legend id="anchH" class="orange-title">H</legend>
</div>
<div class="col-md-12 well">
<legend id="anchI" class="orange-title">I</legend>
</div>
<div class="col-md-12 well">
<legend id="anchJ" class="orange-title">J</legend>
</div>
<div class="col-md-12 well">
<legend id="anchK" class="orange-title">K</legend>
</div>
<div class="col-md-12 well">
<legend id="anchL" class="orange-title">L</legend>
</div>
<div class="col-md-12 well">
<legend id="anchM" class="orange-title">M</legend>
</div>
<div class="col-md-12 well">
<legend id="anchN" class="orange-title">N</legend>
</div>
<div class="col-md-12 well">
<legend id="anchO" class="orange-title">O</legend>
</div>
<div class="col-md-12 well">
<legend id="anchP" class="orange-title">P</legend>
</div>
<div class="col-md-12 well">
<legend id="anchQ" class="orange-title">Q</legend>
</div>
<div class="col-md-12 well">
<legend id="anchR" class="orange-title">R</legend>
</div>
<div class="col-md-12 well">
<legend id="anchS" class="orange-title">S</legend>
</div>
<div class="col-md-12 well">
<legend id="anchT" class="orange-title">T</legend>
</div>
<div class="col-md-12 well">
<legend id="anchU" class="orange-title">U</legend>
</div>
<div class="col-md-12 well">
<legend id="anchV" class="orange-title">V</legend>
</div>
<div class="col-md-12 well">
<legend id="anchW" class="orange-title">W</legend>
</div>
<div class="col-md-12 well">
<legend id="anchX" class="orange-title">X</legend>
</div>
<div class="col-md-12 well">
<legend id="anchY" class="orange-title">Y</legend>
</div>
<div class="col-md-12 well">
<legend id="anchZ" class="orange-title">Z</legend>
</div>
</div>
</div>
</div>
</div>
<footer style="height:250px; background: green;">
<h1>footer</h1>
</footer>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>