headroom.js 插件附IE不兼容 Object.assign 方法

滚动隐藏或展现页面上的元素,简单来说,headroom.js 只为需要响应滚动事件的页面元素增加或删除一个 CSS

<!-- 初始状态 -->
<header class="headroom">

<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">

<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">

当滚动条向下滚动时,添加 headroom–unpinned 样式,向上滚动时,添加 headroom–pinned 样式,同时删除 headroom–unpinned 样式 。所以只要设置 headroom–unpinned 和 headroom–pinned 风格样式即可

.headroom--pinned {
    display:none;
}
.headroom--unpinned {
    display:block;
}

纯 JS 调用

// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去
var headroom = new Headroom(myElement);
// 初始化
headroom.init();

也可以更改一些选项

var options = {
    // 在元素没有固定之前,垂直方向的偏移量(以px为单位)
    offset : 0,
    // scroll tolerance in px before state changes
    tolerance : 0,
    // or you can specify tolerance individually for up/down scroll
    tolerance : {
        up : 5,
        down : 0
    },
    // 自定义 css classes
    classes : {
        // 当元素初始化后所设置的class
        initial : "headroom",
        // 向上滚动时设置的class
        pinned : "headroom--pinned",
        // 向下滚动时所设置的class
        unpinned : "headroom--unpinned",
        // when above offset
        top : "headroom--top",
        // when below offset
        notTop : "headroom--not-top",
        // when at bottom of scoll area
        bottom : "headroom--bottom",
        // when not at bottom of scroll area
        notBottom : "headroom--not-bottom",
        // when frozen method has been called
        frozen: "headroom--frozen"
    },
    // 监听滚动事件, defaults to `window`
    scroller : someElement,
    // 固定时调用, `this` is headroom object
    onPin : function() {},
    // 下拉时调用, `this` is headroom object
    onUnpin : function() {},
    // callback when above offset, `this` is headroom object
    onTop : function() {},
    // callback when below offset, `this` is headroom object
    onNotTop : function() {},
    // callback when at bottom of page, `this` is headroom object
    onBottom : function() {},
    // callback when moving away from bottom of page, `this` is headroom object
    onNotBottom : function() {}
};
// pass options as the second argument to the constructor
// supplied options are merged with defaults
var headroom = new Headroom(element, options);
//
headroom.init();

销毁使用

headroom.destroy();

也可以自定义一些事件

Headroom.prototype.onPin = function() {
    // 上拉时 添加 pinned 样式后 响应
    // 默认在 onPin 事件后会被调用
}
Headroom.prototype.onUnpin = function() {
    // 下拉时 添加 unpinned 样式后 响应
    // 默认在 onUnpin 事件后会被调用
}

有些情况,有的浏览器不支持,导致运行不正常,可事先判断

if(Headroom.cutsTheMustard) {
    var hr = new Headroom(element);
    hr.init();
}

已知在 IE 浏览器中不支持,是因为 IE 没有 Object.assign 方法,所以进行了模拟

if (typeof Object.assign != 'function') {
    Object.assign = function(target) {
        'use strict';
        if (target == null) {
            throw new TypeError('Cannot convert undefined or null to object');
        }

        target = Object(target);
        for (var index = 1; index < arguments.length; index++) {
            var source = arguments[index];
            if (source != null) {
                for (var key in source) {
                    if (Object.prototype.hasOwnProperty.call(source, key)) {
                        target[key] = source[key];
                    }
                }
            }
        }
        return target;
    };
}

在引用 JS 文件之前添加,解决 IE 兼容问题

如果要作为 jQuery 对象使用

需再引入 jquery.headroom.js 文件

调用

$(".headroom").headroom({
    "tolerance": 5,
    "offset": 205,
    "classes": {
        "initial": "animated",
        "pinned": "slideDown",
        "unpinned": "slideUp"
    }
});
// to destroy
$("#header").headroom("destroy");

官方网址:http://wicky.nillia.ms/headroom.js/

评论

还没有任何评论,你来说两句吧!