当前位置：首页 > 网页特效 > 背景

jquery固定标题控制插件Midnight.js

分类：背景日期：2024-05-14 点击(7) 评论(0)

简介

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

------------

##### 创建一个固定标题
```javascript
<nav class="fixed">
  <a class="logo">Logo</a>
</nav>
```
确保标题位置固定然后选取你页面有导航栏的部分，添加数据-midnight="你的类"，这个类正好是你的标题要使用的风格。如果你不使用属性或只留下空白。默认的标题将被用于这部分。
```javascript
<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使用。您的类(类替换为正确的)。例如:
```javascript
.midnightHeader.default {
  background: none;
  color: black;
}
.midnightHeader.white {
  background: white;
  color: black;
}
.midnightHeader.blue {
  background: blue;
  color: white;
}
.midnightHeader.red {
  background: red;
  color: white;
}
```
加载并初始化它
```javascript
<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>
```

web299.com

jquery固定标题控制插件Midnight.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果