fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

midnight.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://aerolab.github.io/midnight.js/
GitHub:https://github.com/Aerolab/midnight.js
网站描述:在页面滚动的时候实现多个头设计之间的切换插件

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


创建一个固定标题

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


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

<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使用。您的类(类替换为正确的)。例如:

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


加载并初始化它

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


链接: https://fly63.com/nav/1698

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览