Loading ...

How to use Headroom.js | CodeAsp.Net

How to use Headroom.js

 /5
0 (0votes)

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up. Below is the js fiddle how to use it:

http://jsfiddle.net/raghav_khunger/d7QQ8/2/

You just need to add this portion on your page:

     <!-- HeadRoom  -->
    <style type="text/css">
    .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
    .headroom--unpinned {top: -100px;}
    .headroom--pinned {top: 0;}
    </style>
   <script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/dist/headroom.js"></script>      
   <script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script>
    <script type="text/javascript">
        $(".navbar-fixed-top").headroom();
    </script>  

Above ".navbar-fixed-top" is the class of your header. Here is the running example for the same:

http://fiddle.jshell.net/raghav_khunger/d7QQ8/2/show/light/

Comments (no comments yet)

Top Posts