JS监听滚动条位置变化

Web 3xcn.com@站长2018年8月13日 pm11:12发布6年前 (2018)更新
0
导航号,我的单页导航


有时候我们需要监听浏览器中上下滚动的位置来改变一些元素的属性隐藏或者显示,比如125啦读书导航中下拉达到一定高度后搜索框会固定在顶部。(可以前去看看效果)

如果我们要实现这效果,就需要监听滚动条的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);
};

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

版权声明 1、 本站名称 91易搜
2、 本站网址 https://www.91es.com/
3、 本站部分文章来源于网络,仅供学习与参考,如有侵权请留言
4、 本站禁止发布或转载任何违法的相关信息,如有发现请向站长举报
导航号,我的单页导航

暂无评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

暂无评论...