将导航栏固定在滚动条的顶部
问题描述：
我们正在尝试在滚动到达页面后立即将页面的导航栏固定到视口的顶部，并且还要防止其越过页脚.我们正在尝试通过词缀(Bootstrap插件)来做到这一点，但似乎没有任何效果.你能给点建议吗?
We are trying to fix the navbar of the page to the top of the viewport as soon as the scroll reaches it, and also, to prevent it from going over the footer. We are trying to do it via affix (Bootstrap plugin) but it doesn't seem to sort any effect. Can you give some advice?
这是侧边栏的html:
Here's the html of the sidebar:
<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>
此页面可在此处访问: https://jsfiddle.net/br6n0hma/
The page is available here: https://jsfiddle.net/br6n0hma/
答
如果我对您的要求正确，则可以找到以下有用的示例. 没有所有花哨的东西，它显示出布局的可能核心结构.
If I get your requirements right, you fill find the example below useful. Without all the fancy things, it shows a possible core structure of your layout.
笔记夫妇:
-
#wrapper有一个.d-flex类，因此更容易定位/调整侧边栏和内容div的大小. - 由于
#spy上的.sticky-top，侧边栏一直停留在顶部. -
.page-content节点已使用.container-fluid类进行了扩展，以正确包装.row元素. - 它使用Bootstrap的内置 Scrollspy 功能，监视
<body>本身.这样可以删除您的javascript的一部分. (这需要侧边栏中链接上的.nav-link类.)
-
#wrappergot a.d-flexclass, so it is easier to position/size the sidebar and the content divs. - The sidebar sticks to the top thanks to
.sticky-topon#spy. -
.page-contentnode was extended with the.container-fluidclass to properly wrap.rowelements. - It uses the built-in Scrollspy functionality of Bootstrap, spying on the
<body>itself. This allows to remove a part of your javascript. (This requires the.nav-linkclasses on the links in the sidebar.)
$(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>