如何仅当指定DOM元素存在对应类时执行$(window).on('load')实现粘性侧边栏

实现代码 #

jQuery(document).ready(function($) {
    // 不需要判断类存在的通用业务代码可放在此处，直接正常执行
    
    if (window.innerWidth > 767) {
        // 判断是否存在带classexists类的div元素
        if ($('div.classexists').length) {
            // 类存在时绑定window.load事件执行粘性侧边栏逻辑
            $(window).on('load', function() {
                var $sticky = $('#sticky');
                var $stickyrStopper = $('.footer');
                if (!!$sticky.offset()) { // 确认sticky元素存在
                    var generalSidebarHeight = $sticky.innerHeight();
                    var stickyTop = $sticky.offset().top;
                    var stickOffset = 0;
                    var stickyStopperPosition = $stickyrStopper.offset().top;
                    var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
                    var diff = stopPoint + stickOffset;
                    
                    $(window).scroll(function(){ // 滚动事件监听
                        var windowTop = $(window).scrollTop();
                        if (stopPoint < windowTop) {
                            $sticky.css({ position: 'absolute', top: diff });
                        } else if (stickyTop < windowTop+stickOffset) {
                            $sticky.css({ position: 'fixed', top: stickOffset });
                        } else {
                            $sticky.css({position: 'absolute', top: 'initial'});
                        }
                    });
                }
            });
            
            // 兼容window已加载完成的场景，避免load事件漏触发
            if (document.readyState === 'complete') {
                $(window).trigger('load');
            }
        }
        // 类不存在时自动跳过load绑定逻辑，直接执行后续代码
    }
    
    // 其余不需要走load的业务代码放在此处，无论类是否存在都会正常执行
});

关键逻辑说明 #

• 类存在判断用$('div.classexists').length即可，返回值大于0就说明存在对应元素，修复了你原写法的语法错误
• 只有同时满足「屏幕宽度大于767px + 存在指定类的div」两个条件时，才会绑定window.load的粘性侧边栏逻辑，否则直接跳过这部分
• 新增document.readyState判断，避免代码执行时window已经加载完成，导致绑定的load事件不触发的问题

优化建议 #

可以新增window.resize事件监听，在窗口尺寸变化时重新计算侧边栏高度、吸附阈值等参数，避免窗口调整后粘性逻辑失效。

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