/    /  Bootstrap Affix

Bootstrap Affix

 

 The bootstrap Affix plugin let an element to become affixed (locked) to an area on the page. then used with navigation menus or buttons, social icons, to make them “stick” at a fixed area while scrolling up and down the page.

Plugin toggles this behavior on and off, depending on the scroll position.

 

Example:

 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
 <h1>Bootstrap Affix Example</h1>
 <h3>Fixed (sticky) navbar on scroll</h3> 
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Basic Topnav</a></li>
  <li><a href="#">nav1</a></li>
  <li><a href="#">nav1 2</a></li>
  <li><a href="#">nav1 3</a></li>
 </ul>
</nav>
<div class="container-fluid" style="height:1000px">
 <h1>Some text to enable scrolling</h1>
 <h1>Some text to enable scrolling</h1>
 <h1>Some text to enable scrolling</h1>
</div>

 

OUTPUT:

 

Bootstrap4 Affix

 

vertical affixed navigation menu:

 

Create vertical affixed navigation menu.

 

Example:

 

<div class="container">
 <div class="row">
  <nav class="col-sm-3">
   <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
    <li class="active"><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
   </ul>
  </nav>
  <div class="col-sm-9">  
   <h1>Some text to enable scrolling</h1>
   <h1>Some text to enable scrolling</h1>
   <h1>Some text to enable scrolling</h1>
   <h1>Some text to enable scrolling</h1>
   <h1>Some text to enable scrolling</h1>
   <h1>Some text to enable scrolling</h1>     
  </div>
 </div>
</div>

 

OUTPUT:

 

Bootstrap4 Affix

 

The bootstrap affix plugin toggles between three classes: .affix, .affix-top, and .affix-bottom. Each class represents a particular position.

.affix-top / .affix-bottom class to indicate the element is in its or bottom position.

 

Scrollspy & Affix:

 

Affix plugin together with the Scrollspy plugin.

 

Example:

 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
 <div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>                        
    </button>
    <a class="navbar-brand" href="#">WebSiteName</a>
  </div>
  <div>
   <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
     <li><a href="#section1">Section 1</a></li>
     <li><a href="#section2">Section 2</a></li>
     <li><a href="#section3">Section 3</a></li>         
    </ul>
   </div>
  </div>
 </div>
</nav>   

<div id="section1" class="container-fluid">
 <h1>Section 1</h1>
 <p>enter contetn here...</p>
</div>
<div id="section2" class="container-fluid">
 <h1>Section 2</h1>
 <p>enter contetn here...</p>
</div>
<div id="section3" class="container-fluid">
 <h1>Section 3</h1>
 <p>enter contetn here...</p>
</div>

 

OUTPUT:

 

Bootstrap4 Affix

 

Vertical Menu (Sidenav):

 

Create vertical menu.

 

Example:

 

<div class="container">
 <div class="row">
  <nav class="col-sm-3" id="myScrollspy">
   <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>

   </ul>
  </nav>
  <div class="col-sm-9">
   <div id="section1">   
    <h1>Section 1</h1>
    <p>enter content here..........!</p>
   </div>
   <div id="section2">
    <h1>Section 2</h1>
    <p>enter content here..........!</p>
   </div>       
   <div id="section3">
    <h1>Section 3</h1>
    <p>enter content here..........!</p>
   </div> 
  </div>
 </div>
</div>

 

OUTPUT:

 

Bootstrap4 Affix