May 18th, 2020 
Prerana Kasar Bootstrap Affix
Bootstrap affix is used to fixed the navigation bar at a specific area while scrolling the page. This is used with button, navigation bar, icons etc.
Example: 1 Bootstrap Affix Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
body
{
position: relative;
}
.affix
{
top: 0;
width: 100%;
z-index: 9999 !important;
}
.navbar
{
margin-bottom: 0px;
}
.affix ~ .container-fluid
{
position: relative;
top: 50px;
}
#section1
{
padding-top: 50px;
height: 250px;
color: #ffffff;
background-color: blue;
}
#section2
{
padding-top: 50px;
height: 250px;
color: #ffffff;
background-color: teal;
}
#section3
{
padding-top: 50px;
height: 250px;
color: #ffffff;
background-color: yellow;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar">
<div class="container-fluid" style="color: #fff; background-color: #F44336; height: 150px;">
<h1>Affix Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
</div>
<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.</p>
</div>
</body>
</html>
On the above code the attribute data-spy is applied to the nav tag with the value affix and data-offset-top.
The data-spy attribute is applied to the nav tag with value affix and data-offset-top.
The classes .affix, .affix-top, affix-bootom is used to applied execption of the position:fixed as this classes is applied as the requirment.
And when you scroll down the page the navigation bar is fixed to the top position. This functionality is applied by the data-spy attribute with value affix.
Posted in 
Tags: 
