小编k.z*_*olt的帖子

多个粘性元素

如何编写无限(#stickyContainer)元素数量的代码(如下)也可以使该代码工作?现在,有一个元素正在发挥作用。

https://jsfiddle.net

function $(id) {
    return document.getElementById(id);
}

function sticky() {
    var stickyBoxHeight = $('stickyBox').offsetHeight;

    var stickyTop = $('stickyBox').getBoundingClientRect();
    var stickyBoxTop = stickyTop.top;

    var stickyBoxBottom = stickyBoxTop + stickyBoxHeight;

    var stickyHeight = $('sticky').offsetHeight;

    if (stickyBoxTop <= 0) {
        $('sticky').className = 'fixed';
    } else if (stickyBoxBottom >= stickyBoxHeight) {
        $('sticky').className = '';
    }

    if (stickyBoxBottom <= stickyHeight) {
        $('sticky').className = 'fixedBottom';
    }
}

window.onscroll = function () {
    sticky();
}
Run Code Online (Sandbox Code Playgroud)

javascript sticky

2
推荐指数
1
解决办法
8762
查看次数

标签 统计

javascript ×1

sticky ×1