Bootstrap Affix

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.

Bootstrap Affix
Fig.1 – Bootstrap Affix Example.

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.

You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape