charlie8x
10/17/2017 - 2:55 PM
Bootstrap 4 Navigation Bar with Scroll Spy
Navigation Bar with Scroll Spy Function
body {
padding-top: 80px;
}<!-- Scroll Spy needs to add <<data-spy="scroll">> and <<data-target="#navbarID">> to work -->
<!-- <<data-offset="VALUE">> value must match with the <<padding-top>> of the body in CSS-->
<body data-spy="scroll" data-target="#myNavBar" data-offset="80">
<header>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque
repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci
natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt
quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur
ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas,
at!
</p>
</header>
<!--START Nav -->
<nav id="myNavBar" class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<!-- START Toggle Button -->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- END Toggle Button -->
<!-- START Collapsible Navbar -->
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="container">
<div class="row justify-content-center">
<div class="navbar-nav text-center">
<a class="nav-item nav-link" href="#item1">Item1</a>
<a class="nav-item nav-link" href="#item2">Item2</a>
<a class="nav-item nav-link" href="#item3">Item3</a>
<a class="nav-item nav-link" href="#item4">Item4</a>
<a class="nav-item nav-link" href="#item5">Item5</a>
<a class="nav-item nav-link" href="#item6">Item6</a>
</div>
<!-- navbar-nav mr-auto -->
</div>
</div>
</div>
<!-- END Collapsible Navbar -->
</nav>
<!-- END Nav -->
<div id="item1">
<h1>Item 1</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque
repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci
natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt
quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur
ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas,
at!
</p>
</div>
<div id="item2">
<h1>Item 2</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque
repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci
natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt
quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur
ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas,
at!
</p>
</div>
<div id="item3">
<h1>Item 3</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque
repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci
natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt
quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur
ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas,
at!
</p>
</div>
<div id="item4">
<h1>Item 4</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque
repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci
natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt
quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur
ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas,
at!
</p>
</div>
<div id="item5">
<h1>Item 5</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque
repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci
natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt
quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur
ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas,
at!
</p>
</div>
<div id="item6">
<h1>Item 6</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque
repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci
natus odit doloribus incidunt quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Quas porro qui consequuntur ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt
quo inventore ea ipsum! Voluptas, at! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas porro qui consequuntur
ratione ex tempora modi, aliquam eaque repellendus adipisci natus odit doloribus incidunt quo inventore ea ipsum! Voluptas,
at!
</p>
</div>
</body>// Make sure the jquery is a FULL version instead of SLIM
// include this file at the bottom of the page for smooth scrolling
$(function () {
var topoffset = 50; //variable for menu height
//Use smooth scrolling when clicking on navigation
$('.navbar-nav a').click(function () {
if (location.pathname.replace(/^\//, '') ===
this.pathname.replace(/^\//, '') &&
location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - topoffset
}, 500);
return false;
} //target.length
} //click function
}); //smooth scrolling
});