jQuery

【jQuery】スクロールするとナビゲーションバーをフェードするFadingNav

December 3, 2016
fadingNav

FadingNavはスクロールするとナビゲーションバーをフェードするjQueryプラグイン。

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>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="fadingNav.min.js"></script>
$('.navbar').fadingNav();

Default options

  1. bkgColor: ‘0, 0, 0’
  2. alpha: 0
  3. itemHeight: $(window)
  4. refreshRate: 50
  5. fadeOnHoverClass: ‘hover-class’
  6. removeOnHoverClassDelay: 200
  7. enableBreakPoint: true
  8. breakPointClass: ‘break-point’
  9. breakPointValue: 0.5
$('.navbar').fadingNav({
    bkgColor: '22, 124, 124',
    alpha: 0.2,
    fadeOnHover: false
});