javascript 带滚动间谍的Bootstrap 4导航栏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 带滚动间谍的Bootstrap 4导航栏相关的知识，希望对你有一定的参考价值。
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
});以上是关于javascript 带滚动间谍的Bootstrap 4导航栏的主要内容，如果未能解决你的问题，请参考以下文章
《javaScript100例|01》超级经典一套鼠标控制左右滚动图片带自动翻滚