注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery固定并控制导航或头部切换插件Midnight

UI fishcity 2494浏览

jquery固定导航或头部Midnight

Midnight是一款固定并控制导航或头部切换的 jQuery 插件,在页面滚动的时候实现导航或头部的CSS样式随着不同的sections而改变,这样使得你固定内容一直与背影形成反差,得到突出显示,效果很不错。

jquery实例:Midnight使用方法

引入核心文件

<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>

构建html,确认position:fixed能正常工作

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

建立几个section,并使用属性 data-midnight="your-class"给每个添加不同的样式,如果不设置该属性,插件会默认使用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,你可以在你的css样式类.midnightHeader使用你自定义的样式

.midnightHeader.default {
  background: none;
  color: black;
}
.midnightHeader.white {
  background: white;
  color: black;
}
.midnightHeader.blue {
  background: blue;
  color: white;
}
.midnightHeader.red {
  background: red;
  color: white;
}

写入JS初始化

  $(document).ready(function(){
    $('nav.fixed').midnight();
  });

自定义标签

假设您希望创建一个特殊的头部,它需要一些额外的标记,那么你需要做两件事:

1、添加一个样式类为.midnightHeader的DIV,用作header的公共样式。

2、在.midnightHeader的div上再加一个样式类your-class,类名可自定义,用于自定义标签的样式。

3、所有的header需要同一高度

代码如下:

<nav class="fixed">
  <!-- 标准的 header -->
  <div class="midnightHeader default">
    <a class="logo">Logo</a>
  </div>

  <!-- 有特特要求的 header  -->
  <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({
  // 每个header包含的样式类,用作剪切蒙版。
  headerClass: 'midnightHeader',
  // header内容包含的样式类.也用作剪切蒙版。
  innerClass: 'midnightInner',
  // header的默认样式类 (添加多个标题不同section时非常有用).
  defaultClass: 'default'
});

转载请注明:jQ酷 » jquery固定并控制导航或头部切换插件Midnight

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。