Bootstrap Affix

You would have seen websites where navigation menus stays right on the top no matter how much you scroll down the page. A typical example of such menu is the Facebook or Twitter menu, where you have a menu fixed at the top even if you scroll to the end of the page (there is no end to such pages by the way). Bootstrap affix plugin allows you to create such sticky elements. These elements stays on specific location on the screen and do not move with the scroll bar like rest of the elements.

To use bootstrap affix plugin you can either add “affix.js” file to implement modal in your application or you can use “bootstrap.js” file which includes the affix plugin functionality by default. Take a look at the following example to see how sticky horizontal menu is implemented in bootstrap via bootstrap affix plugin. The code explanation is given after that.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

            <style>
        
          .affix {
              top: 0;
              width: 100%;
          }

          .affix + .container-fluid {
              padding-top: 80px;
          }
          </style>
        
        
    </head>

<body> 
        <div class="container-fluid" style="background-color:blue;color:#fff;height:300px;">
  <h1>A sample bootstrap affix menu</h1>
  <h3>Sicky Menu Bar Example</h3>
  <p>If you scroll the page you shall see that menu bar stays affixed at the top of the page after you move certain pixels down.</p>

</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="200">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1200px">
  <h1>Just some random text for scrolling purposes</h1>
   <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
    <h1>Just some random text for scrolling purposes</h1>
     

</div>
           
    </body>

</html>

Download the code Try the code

To make any element stick to a specific position simply add “data-spy=”affix”” attribute to it. In the above example, you can see that the navigation menu contains this attribute. Another extremely important attribute is the data-offset-top or data-offset-bottom attribute. This attribute specifies the number of pixels to scroll from top or bottom before the element sticks to the top. Therefore, if you open the above page and scroll 200px from the top, you shall see that your scrollbar sticks at the top of the page.

Bootstrap Tooltip

A tooltip is a small box which appears when a user hovers mouse over an element. It disappears as soon as the mouse pointer is taken out of it. It is very simple to create tooltips with bootstrap. To do so, simply add “data-toggle=”tooltip”” attribute to the element. You also have to call “tooltip()” function on the element via JQuery. This initializes the tooltip. Take a look at the following example to see tooltip in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
    </script>

    <body> 
        
        <button class="btn btn-primary" data-toggle="tooltip" title="Knowledge House">Hover Mouse</button>
            
    </body>

</html>

Download the code Try the code

Open the above webpage in browser. You will see a blue button. Hover your mouse over the button. A tooltip shall appear. Similarly, remove the mouse pointer from the button, you shall see tooltip disappear.

<<< Bootstrap ScrollspyStacked to Horizontal Bootstrap Grids >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .