JS监听滚动条位置变化

有时候我们需要监听浏览器中上下滚动的位置来改变一些元素的属性隐藏或者显示，比如笔友城堡中下拉达到一定高度后搜索框会固定在顶部。（可以前去看看效果）

如果我们要实现这效果，就需要监听滚动条的Y轴位置的变化，根据Y轴的位置来改变某些元素的属性值。

闲话少说，直接附上代码(下面是改变类header的属性)

/**
 根据y的位置动态改变Header位置
 */
function moveHeaderPosition(y) {
    var header = document.getElementById("header");
     【这里改变的是位置的属性值】
    if (y >= header.offsetHeight) {
        header.style.position = "fixed";
    } else {
        header.style.position = "relative";
    }

};


/**
 监听滚动条位置
 */
window.onscroll = function () {
    【兼容chrome、Firefox、ie等大众浏览器】
    if (document.documentElement) {
        var y1 = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
        var y2 = document.body.scrollTop || 0;
    }
    var y3 = window.scrollY || 0;
    【滚动条到页面顶部的垂直距离】
    var y = Math.max(y1, Math.max(y2, y3));
    moveHeaderPosition(y);
};

由于不同浏览器会有些不兼容问题，因此再获取滚动条位置时需要特别注意。