我有许多部分打开了滚动条，其中按钮由scrollspy显示。一切都很完美，唯一的区别是，如果向下滚动太远，scrollspy就会消失在右边，因为它会延伸到页面之外。我怎样才能使滚动条在活动scrollspy按钮的方向移动(在scrollspy活动按钮获得自动添加的类active)?
我没有使用jQuery。
代码如下:
window.setInterval(function(){
window.onload = function () {
document.getElementsByClassName('navbar')[0].scrollLeft = 0;
var menus = document.getElementsByClassName('nav-link');
for (var i = 0; i < menus.length; i++) {
if (menus[i].classList.contains('active')) {
document.getElementsByClassName('navbar')[0].scrollLeft = menus[i].offsetLeft;
}
}
}
}, 1);<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ePizza Test Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<style>
body {
position: relative;
max-width: 500px;
margin: 0 auto;
}
nav {
position: fixed !important;
top: 0%;
overflow: auto;
white-space: nowrap;
flex-direction: row;
width: 100%;
max-width: 500px;
}
.nav {
flex-wrap: unset;
flex-direction: row;
}
</style>
</head>
<body>
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Third</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">Fourth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading5">Fifth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading6">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading7">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading8">Third</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading9">Fourth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading10">Fifth</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading6" >First heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading7">Second heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading8">Third heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading9">Fourth heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading10">Fifth heading</h4>
<p>First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
</div>
<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
</script>
</body>
</html>提前感谢!
你可以用一个函数创建一个滚动事件监听器，它将使导航条滚动到活动的scrollspy按钮。我还在导航栏CSS中添加了scroll-behavior: smooth，以避免"突然滚动"。
const nav = document.querySelector('nav');
const h = document.documentElement;
document.addEventListener('scroll', function() {
nav.scrollTo(nav.querySelector('.active').offsetLeft, 0);
});<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ePizza Test Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<style>
body {
position: relative;
max-width: 500px;
margin: 0 auto;
}
nav {
position: fixed !important;
top: 0%;
overflow: auto;
white-space: nowrap;
flex-direction: row;
width: 100%;
max-width: 500px;
scroll-behavior: smooth;
}
.nav {
flex-wrap: unset;
flex-direction: row;
}
</style>
</head>
<body>
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Third</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">Fourth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading5">Fifth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading6">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading7">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading8">Third</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading9">Fourth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading10">Fifth</a>
</li>
</ul>
</nav>
<div data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading6">First heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading7">Second heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading8">Third heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading9">Fourth heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading10">Fifth heading</h4>
<p>First heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here
to emphasize the scrolling and highlighting. Second heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.
We keep adding some more example copy here to emphasize the scrolling and highlighting. Third heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.
It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fourth heading This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Fifth heading This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
</div>
<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
</script>
</body>
</html>