BS4 Scrollspy
Bootstrap 4 Scrollspy
Using Scrollspy, links in a navigation list can be automatically updated according to the scroll position.
==== button mukavu ====
How To Create a Scrollspy
The example that follows demonstrates how to make a scrollspy:
Example
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
Example Explained
To designate an element as the scrollable region, add data-spy=”scroll” to it (usually the <body> element).
Next, include the data-target attribute with the navigation bar’s class name (.navbar) or id as its value. This is to ensure that the scrollable area and the navbar are connected.
Be aware that scrollable elements (<div id=”section1″> matches <a href=”#section1″>) must match the ID of the links contained in the list items of the navbar.
When determining the scroll position, the optional data-offset attribute indicates how many pixels to offset from the top. This is helpful if you feel that the links in the navbar alter the active state when they navigate to scrollable components by changing it too soon or too early. Ten pixels is the default.
Relative positioning: In order for the element with data-spy=”scroll” to function correctly, the CSS position property must have a value of “relative”.
Scrollspy Vertical Menu
==== button mukavu ====
The vertical navigation pills from Bootstrap are used as the menu in this example:
Example
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
