I'm sure you're familiar with CodePen questions.
Here's mine: https://codepen.io/fender90/pen/KqVLba
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
...
<p>CSS</p>
<pre><code>* {
overflow: auto;
}
body {
position: relative;
height: 100%;
overflow: auto;
}
.fa, .navbar, .navbar-inverse {
overflow: hidden;
}
.row, .about-me {
display: flex;
height: 100%;
}
.navbar-inverse {
font-size: medium;
padding: 10px;
}
...
<p>jQuery</p>
<pre><code>$(window).load(function() {
var navheight = parseFloat($(".navbar").height());
$("body").css({ "margin-top": navheight + 20 + "px" });
});
Why doesn't the scrollspy work as expected? Elements in the navbar are not highlighted while scrolling.
I've tried following instructions from this link.
I also attempted using:
$('body').scrollspy({target: "#navbar"})
But still no success. Any ideas?
Appreciate your help!