整合常用功能的JS小组件库-v1.0

function Alex() {
    //给予video.js的页面滚动到视频元素范围内自动播放/出范围暂停播放-----01
    this.video_autoplay = function (box) {
        var video_box = box.getElementsByTagName('video')[0];
        //能否自动播放
        var canAuto = true;
        //元素距离顶部高度//上滚此距离元素完全出现
        var top = box.offsetTop;
        //元素高度
        var height = parseFloat((window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle).height);
        //网页可见区域高度
        var _height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        //下滚此距离元素完全出现
        var min_scroll_height = top - _height + height;
        //下滚超过此距离元素完全消失
        var max_scroll_height = top + height;
        //上滚此距离元素完全出现
        var up_max_height = max_scroll_height - height;
        //上滚此距离元素完全消失
        var up_min_height = top - _height;
        //人为点击之后不再自动播放
        box.addEventListener('click', function () {
            canAuto = false;
        });
        //判断是上滚还是下滚
        var scroll = function (fn) {
            var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
                fn = fn || function () {
                    };
            window.addEventListener("scroll", function () {
                var afterScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
                    delta = afterScrollTop - beforeScrollTop;
                if (delta === 0) return false;
                fn(delta > 0 ? "down" : "up");
                beforeScrollTop = afterScrollTop;
            }, false);
        }
        var video_scroll = function () {
            //可以自动播放
            scroll(function (direction) {
                var _top = document.documentElement.scrollTop || document.body.scrollTop;
                if ((direction == 'down') && (_top > min_scroll_height) && canAuto) {
                    video_box.play();
                }
                if ((direction == 'down') && (_top > max_scroll_height)) {
                    video_box.pause();
                }
                if ((direction == 'up') && (_top < up_max_height) && canAuto) {
                    video_box.play();
                }
                if ((direction == 'up') && (_top < up_min_height)) {
                    video_box.pause();
                }
            });
        }
        video_scroll();
    };
    //元素滚动到一定距离后固定在页面顶部------------------------------02
    this.menu_fixed = function (menu_container) {
        var _top = menu_container.offsetTop;
        var scroll_div = function () {
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            if (top > _top) {
                menu_container.style.position = 'fixed';
                menu_container.style.top = '0';
            } else if (top < _top) {
                menu_container.style.position = 'relative';
                menu_container.style.top = '0';
            }
        }
        scroll_div();
    }
}
var alex = new Alex();

调用方法

var box = document.querySelector('.index_video');
alex.video_autoplay(box);