如何给网站页头增加滚入/滚出效果

在一个页面的整体布局中， 网站的页头区块一般包含较多的内容，比如网站的名称、图标、图片、主菜单等内容，这样页头信息会占用较多的布局空间，而且页头往往会始终出现，这样会减少主要内容信息的浏览空间。所以为了提高用户交互的友好性，一般可以把页头区块设计成具有滚入和滚出的动画效果，也就是当用户向下滚动页面内容时，页头区块会滚动出视野，当用户向上滚动页面内容时，页头区块又会滚动进入视野。

本篇文章就介绍一下网站页头滚入/滚出效果的实现方法，该方法使用了 jquery 插件 headroom.js ，所以在实现这一效果之前需要先引入该插件的 javascript 程序包，代码如下所示：

<script type="text/javascript" src="https://www.example.com/wp-content/plugins/myplugin/js/jQuery.headroom.js"></script>

然后给页头区块最外层 html 元素定义 CSS ，代码如下：

.site-header-main {
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1000;
    width: 100%;
    padding: 0px 20px;
    height: 100px;
}

最后使用 javascript 代码触发滚入/滚出的动画效果，代码如下：

$(".site-header-main").headroom({
  "tolerance": 5,
  "offset": 205,
  "classes": {
    "initial": "animated",
    "pinned": "slideDown",
    "unpinned": "slideUp"
  }
});