Отслеживание прокрутки

Компонент 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.

См. также

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты