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?
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>
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.
Couple of notes:
#wrapper got a .d-flex class, so it is easier to position/size the sidebar and the content divs..sticky-top on #spy..page-content node was extended with the .container-fluid class to properly wrap .row elements.<body> itself. This allows to remove a part of your javascript. (This requires the .nav-link classes 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>