Компонент 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). Вони є краєвид basket, woven і fitted до shape of a foot. Bast shoes є obsolete traditional footwear of the forest areas of Northern Europe, forrly worn by poorer members of Finnic peoples, Balts, and East Slavs. They були easy to manufacture, але не durable.</p> <h4 id="brogan">Brogan</h4> <p>Brogan-like shoes, called "brogues", були зроблені і кинуті в Scotland and Ireland як 16th century, і shoe-type probably originated there.</p> <h4 id="calceology">Calceology</h4> <p>Calceology is the study of footwear, особливо historical footwear whether as archaeology, shoe fashion history, or otherwise.</p> <p>Calceology включає в себе 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.
