如何高效检测页面滚动位置 优化jQuery粘性栏显示性能

问题背景 #

这是一个基于jQuery的前端项目，需要实现如下粘性栏交互：

• 当浏览器窗口滚动位置超过.product-section元素的顶部偏移值时，显示ID为#sticky-atc-bar的粘性栏
• 其余滚动位置下隐藏该粘性栏

最初的实现直接绑定window的scroll事件，每次滚动都判断位置、执行显隐逻辑，代码可正常运行，但滚动全程会触发大量scroll事件，执行效率低。
最初版代码：

$( document ).ready(function() {
    $('#sticky-atc-bar').hide();

    var section = $(".product-section");
    var offsetSection = section.offset().top; // 读取元素顶部偏移
    $(function() {
        $(window).scroll(function() {
        console.log('Scroll Event');

            if ($(window).scrollTop() >= offsetSection) { // 滚动到产品区块位置
                console.log('True:');
                $('#sticky-atc-bar').show();
            } else { // 未滚动到产品区块位置
                console.log('False');
                $('#sticky-atc-bar').hide();
            }
        });
    }); 
});

后续参考节流方案改写了代码，将逻辑触发频率降低到250ms一次，代码可正常运行，但仍存在滚动时持续触发事件的问题。
节流版代码：

var target = $(".product-section").offset().top,
    timeout = null;

$('#sticky-atc-bar').hide();

$(window).scroll(function () {
    if (!timeout) {
        timeout = setTimeout(function () {
            console.log('scroll');            
            clearTimeout(timeout);
            timeout = null;
            if ($(window).scrollTop() >= target) {
                 $('#sticky-atc-bar').show();            
            } else {
                 $('#sticky-atc-bar').hide();
            }
        }, 250);
    }
});

待解决的疑问：

• 是否存在更优的实现方式？
• 除了调整节流超时时间外，能否进一步减少该操作的事件触发量？
• 当前250ms一次的触发频率是否会造成明显性能影响，是否还有继续优化的必要？

回答 #

1. 最优实现方案：使用原生Intersection Observer API #

这是目前浏览器原生支持的、性能最好的元素可见性监听方案，完全不需要绑定scroll事件，从根源上避免了滚动时高频触发回调的问题。浏览器会在内部自动优化检测时机，只有当被监听元素和视口的交叉状态发生变化时才会触发回调，整个滚动流程中回调最多只会触发2次：一次是滚动超过阈值显示粘性栏，一次是滚回阈值上方隐藏粘性栏，不存在任何冗余触发。

jQuery环境下的实现代码如下：

$(document).ready(function() {
    const $stickyBar = $('#sticky-atc-bar');
    const $productSection = $('.product-section');
    $stickyBar.hide();

    // 特性检测，支持IntersectionObserver的浏览器走原生方案
    if ('IntersectionObserver' in window) {
        const sectionObserver = new IntersectionObserver((entries) => {
            const sectionEntry = entries[0];
            // 当产品区块顶部滚动到视口上方时，显示粘性栏
            sectionEntry.boundingClientRect.top <= 0 ? $stickyBar.show() : $stickyBar.hide();
        }, {
            root: null, // 以视口作为检测基准
            threshold: 0 // 元素边缘刚碰到视口边界就触发回调
        });
        sectionObserver.observe($productSection[0]);
    } else {
        // 不支持API的老浏览器走优化后的scroll节流回退逻辑
    }
});

这个方案除了性能优势外，还不需要手动处理页面内容变化导致的阈值偏移问题，浏览器会自动计算元素位置，比手动维护offset值靠谱很多。

2. scroll事件方案的进一步优化 #

如果需要兼容不支持Intersection Observer的老浏览器（比如IE11及更早版本），你现在的节流逻辑还可以做一层优化，进一步减少不必要的性能消耗：

• 增加状态标记，记录当前粘性栏的显隐状态，只有当状态需要切换时才执行DOM操作，避免滚动过程中重复调用show()/hide()触发不必要的页面重绘。

优化后的节流代码如下：

var target = $(".product-section").offset().top,
    timeout = null,
    isBarVisible = false; // 记录当前粘性栏显隐状态

$('#sticky-atc-bar').hide();

$(window).scroll(function () {
    if (!timeout) {
        timeout = setTimeout(function () {
            clearTimeout(timeout);
            timeout = null;
            const currentScroll = $(window).scrollTop();
            const shouldShow = currentScroll >= target;
            // 仅当状态和预期不一致时才操作DOM
            if (shouldShow !== isBarVisible) {
                isBarVisible = shouldShow;
                shouldShow ? $('#sticky-atc-bar').show() : $('#sticky-atc-bar').hide();
            }
        }, 250);
    }
});

注意如果页面存在动态加载内容、图片懒加载等会改变页面高度的场景，要在内容加载完成后重新更新target的偏移值，避免位置判断失准。

3. 关于250ms节流频率的性能问题 #

250ms触发一次的频率完全不会造成可感知的性能影响：每次回调仅做一次数值比较，最多触发一次DOM修改，哪怕是低端移动设备也不会出现卡顿。
如果你的业务不需要兼容IE11这类老浏览器，直接换Intersection Observer方案即可，不需要再纠结节流参数的调整；如果需要兼容老浏览器，加上状态锁优化后的节流代码已经完全够用，继续抠事件触发频率的性能收益极低，没有必要投入额外精力。

内容的提问来源于stack exchange，提问作者inspirednz