创建一个固定标题
<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>