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>
网站地址:http://aerolab.github.io/midnight.js/
GitHub:https://github.com/Aerolab/midnight.js
网站描述:在页面滚动的时候实现多个头设计之间的切换插件
midnight.js
官方网站：http://aerolab.github.io/midnight.js/
小编说
以上是编程之家为你收集整理的midnight.js全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。