您现在的位置:爱折腾>> web>>正文内容

Midnight.js基于jQuery多屏滚动固定头部切换效果

Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错。 Midnight.js 可以让你轻松实现这种切换固定头的效果。

Midnight.js基于jQuery多屏滚动固定头部切换效果

Midnight.js是在页面滚动时控制多标题设计的开关jQuery插件,所以对应下面的内容你总能看到一个标题。

快速入门

创建你的固定标题,你可以使用任何你喜欢的标签

<nav class="fixed">
  <a class="logo">Logo</a>
</nav>

确保给标题加入定位的CSS样式:position:fixed

确保标题位置固定然后选取你页面有导航栏的部分,添加data-midnight=”your-class”,这个类正好是你的标题要使用的风格。如果你不使用属性或只留下空白。默认的标题将被用于这部分。

<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;
}

最后引入midnight.jquery.js文件,通过midnight()初始化插件

<script src="midnight.jquery.js"></script>
<script>
  // Start midnight
  $(document).ready(function(){
    // Change this to the correct selector for your nav.
    $('nav.fixed').midnight();
  });
</script>

使用自定义标记

让我们说你想用一只蝴蝶在它中创建一个特别的头,它需要一些额外的标记。你需要做的事情:

  • 首先,添加一个DIV并且添加类 .midnightHeader.default。这将是用于每个部分(没有特定风格)和重复的头文件,自动替换。默认的正确的类。
  • 然后,添加一个DIV并且添加类.midnightHeader.your-class(例如:.butterfly)。在这种情况下,这将被使用,所以你可以使用一些自定义标记的情况下。使用自定义标记重复此步骤。
  • 请记住,所有的头都需要相同的高度。把你的头造型时考虑进去。如果你有一个比平常更大的话,我们建议你把所有的头文件,并尝试用附加的标记来处理它。
<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>

自定义初始化参数

在使用时,您可以使用各种自定义选项:

$('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'
});

相关链接

相关文章