BS Affix
The Affix Plugin
The Affix plugin allows an element to be attached (locked) to a specific region on the page. This is commonly used with navigation menus or social icon buttons to make them “stick” in a set location while scrolling up and down the page.
Depending on the scroll position, the plugin toggles this behavior on and off (changing the CSS position value from static to fixed).
Example 1) A fixed navbar:
---- SCROLL MUKAVU ----
Example 2) An attached sidebar:
---- SCROLL MUKAVU ----
With Affix, the menu remains visible and locked in place when we navigate up and down the page.
How To Create an Affixed Navigation Menu
The example below explains how to make a horizontal attached navigation menu.
Example
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
The example below explains how to make a vertical attached navigation menu.
Example
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Example explained
Add data-spy=”affix” to the element you want to affix.
To compute the scroll position, optionally add the data-offset-top|bottom attribute.
How it works
The affix plugin can switch between three classes: .affix, .affix-top, and .affix-bottom. Each class represents a specific state. With the exception of position:fixed on the .affix class, CSS properties must be added to handle actual positions.
- The plugin adds the .affix-top or .affix-bottom classes to denote whether the element is at the top or bottom. CSS positioning is not required at this time.
- Scrolling past the affixed element initiates the affixing process, in which the plugin replaces the .affix-top or .affix-bottom classes with the .affix class. At this point, you must use the CSS top or bottom property to place the attached element on the page.
- If a bottom offset is specified, scrolling past it replaces the .affix class with .affix-bottom. Because offsets are optional, you must first apply the relevant CSS. In this scenario, use position:absolute when necessary.
In the first example above, the Affix plugin applies the .affix class (position:fixed) to the <nav> element after scrolling 197 pixels from the top. If you open the sample, you will notice that we have added the CSS top attribute with a value of 0 to the .affix class. This ensures that the navbar remains at the top of the page even after we’ve scrolled 197 pixels.
Scrollspy & Affix
Using the Affix plugin alongside the Scrollspy plugin:
Horizontal Menu (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
<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>
Vertical Menu (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
