Skip to content

amir5000/fadingNav

Repository files navigation

fadingNav

DEMO1

A jQuery plugin to fade the NavBar as you scroll to include you need to follow the 4 steps below.

    1. Include your Fixed Nav HTML.
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>
    1. Include jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    1. Include the plugin after jQuery.
<script src="fadingNav.min.js"></script>
    1. Initialize the fadingNav plugin.
$('.navbar').fadingNav();

Default options:

  • bkgColor: '0, 0, 0' - a string value for the background default color in RGB.
  • alpha: 0 - an int value from 0 - 1 to change the starting alpha opacity.
  • itemHeight: $(window) - the height of a container selector that once you reach the end of it the NavBar becomes 100% alpha. Can be changed to be the height of any element.
  • refreshRate: 50 - change the scroll refresh rate, don't touch this unless you know what you are doing.
  • fadeOnHover: true - a boolean value to turn on or off the on hover feature.
  • fadeOnHoverClass: 'hover-class' - a string value with the class name when hovering on the NavBar.
  • removeOnHoverClassDelay: 200 - a number of miliseconds delay when removing the on hover class (Note: you will need to make sure this is the same as the CSS transition length in your CSS file.)
  • enableBreakPoint: true - This option enables a breakpoint that which a class will get added or removed for styling inside the NavBar once you scroll to a certain point.
  • breakPointClass: 'break-point' - this is the class added once the breakpoint is reached.
  • breakPointValue: 0.5 - the value of the which the class will get added once the breakpoint is reached. (0 is the top and 1 is the very end of the itemHeight container height.)

All options can be overridden when initilizing the plugin like this:

$('.navbar').fadingNav({
    bkgColor: '22, 124, 124',
    alpha: 0.2,
    fadeOnHover: false
});

I have included all the basic features needed for v1.0

To Do for v1.x:

  • Add better mobile scrolling effect.
  • Add better unit testing for the plugin.
  • Add a start and end class for more customization.
  • Add callback function cababilities when the end of the plugin functionality is reached and as well as when the begining is reached again.
  • Add a feature to reverse the opacity direction to fade out instead of fade in.
  • Add better Grunt tasks (minify CSS). DONE