Компонент Scrollspy позволяет выделять текущую позицию в меню, основываясь на позиции пользовательской прокрутки. Когда пользователь прокручивает страницу вниз, соответствующий пункт меню выделяется на основе того, где находится позиция прокрутки.
Пример Scrollspy
Вот пример Scrollspy в действии. Прокрутите страницу вниз и увидите как выделится каждый пункт меню, когда вы достигнете соответствующей позиции на странице.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav id="scrollspy-nav" class="navbar navbar-default">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#bast">Bast</a></li>
<li class="nav-item"><a class="nav-link" href="#brogan">Brogan</a></li>
<li class="nav-item"><a class="nav-link" href="#calceology">Calceology</a></li>
</ul>
</nav>
<article data-spy="scroll" data-target="#scrollspy-nav" data-offset="0"
style="overflow: scroll; width: 60vw;height: 70vh;font-size: 4vw;">
<h4 id="bast">Bast Shoes</h4>
<p>Bast shoes are shoes made primarily from bast (fiber from the bark of the
linden tree or birch tree). They are a kind of basket, woven and fitted to
the shape of a foot. Bast shoes are an obsolete traditional footwear of the
forest areas of Northern Europe, formerly worn by poorer members of the Finnic
peoples, Balts, and East Slavs. They were easy to manufacture, but not durable.</p>
<h4 id="brogan">Brogan</h4>
<p>Brogan-like shoes, called "brogues", were made and worn in Scotland and Ireland
as early as the 16th century, and the shoe-type probably originated there.</p>
<h4 id="calceology">Calceology</h4>
<p>Calceology is the study of footwear, especially historical footwear whether as
archaeology, shoe fashion history, or otherwise.</p>
<p>Calceology comprises the examination, registration, research and conservation
of leather shoe fragments.</p>
<p>However, calceology is not yet formally recognized as a field of research. </p>
</article>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Scrollspy требует относительного позиционирования
Scrollspy требует использования position:relative для отслеживаемого элемента, обычно это элемент <body>. Однако, когда вы следите за другими элементами, потребуется установить высоту и применить overflow-y:scroll.