midnight - 网页滚动视差效果插件

midnight.js是一款能够让你的网站logo随页面滚动并产生视觉差滚动效果的jquery插件。midnight.js能产生多重header的视觉差滚动效果，能够让你的页面始终处于header的下面。

HTML结构

创建一个固定的导航和header，例如像下面这样。
<nav class="fixed">
  <a class="logo">Logo</a>
</nav>
你必须确保header的定位方式为：position:fixed。
然后你可以在你的页面中添加多个section，每个section在logo进入时都会呈现不同的状态，给section添加data-midnight="your-class"。如果你不使用任何属性或只是留下空白，那么那个section将被应用为.default。
<section data-midnight="white">
  <h1>A section with a dark background, so a white nav would look better here</h1>
</section>
 
<div data-midnight="blue">
  <h1>A blue nav looks better here</h1>
</div>
 
<footer>
  <h1>This will just use the default header</h1>
</footer>

CSS样式

你可以在.midnightHeader.your-class中替换你的样式，例如：
.midnightHeader.default {
  background: none;
  color: black;
}
.midnightHeader.white {
  background: white;
  color: black;
}
.midnightHeader.blue {
  background: blue;
  color: white;
}
.midnightHeader.red {
  background: red;
  color: white;
}

JAVASCRIPT

在页面中引入jQuery文件和midnight.jquery.js：
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="midnight.jquery.min.js"></script>
<script>
  // Start midnight
  $(document).ready(function(){
    // Change this to the correct selector for your nav.
    $('nav.fixed').midnight();
  });
</script>
自定义标签
如果你想创建一个属于自己的漂亮的header或logo，那么你需要做好两件事：
首先，添加一个div，给它class midnightHeader和default 。
然后，添加一个div，给它class midnightHeader和your-class。
注意：所有的header需要相同的高度。
<nav class="fixed">
  <!-- Your standard header -->
  <div class="midnightHeader default">
    <a class="logo">Logo</a>
  </div>
 
  <!-- A header with a butterfly -->
  <div class="midnightHeader butterfly">
    <a class="logo">Logo</a>
    <span class="a-butterfly"><!-- Everybody loves butterflies! --></span>
    <span class="another-butterfly"><!-- OH GOD THEY ARE IN MY FACE --></span>
    <span class="yet-another-butterfly"><!-- AAAAAHHHHHHHHHHHHHHHHHHHHH --></span>
  </div>
</nav>
可选参数
下面是使用midnight时的一些可选参数：
$('nav').midnight({
  // The class that wraps each header. Used as a clipping mask.
  headerClass: 'midnightHeader',
  // The class that wraps the contents of each header. Also used as a clipping mask.
  innerClass: 'midnightInner',
  // The class used by the default header (useful when adding multiple headers with different markup).
  defaultClass: 'default'
});