提问者:小点点

jQuery修正了滚动时边栏闪烁的问题


我试图使标题和侧栏粘在滚动。标题贴得很好。侧边栏也粘着,但不断闪烁。我在某处读到这是由于Chrome的一个错误,但这个问题是普遍存在的。

当我尝试通过开发人员工具进行调试时,我可以看到“sticky”类不断地添加和移除到侧边栏中,而不是头。

任何见解都将受到高度赞赏。

JS:


    function ScrollFunc() {
        /* navbar */
        if (window.pageYOffset >= (jQuery('#nav-wrapper').height()) {
            jQuery('#nav-wrapper').addClass("sticky");
        } else {
            jQuery('#nav-wrapper').removeClass("sticky");
        }

        /* sidebar */
        if (window.pageYOffset >= (jQuery("#sidebar").offset().top + jQuery("#sidebar').height())) {        
            jQuery('#sidebar').addClass('sticky');
        } else {
            jQuery('#sidebar').removeClass("sticky");
        }
    }

CSS:


    .sticky {
        position: fixed;
        top: 0;
    }


共1个答案

匿名用户

已修复:

jQuery(window).load(function() {
    crazyOffset = jQuery('#sidebar').offset().top + jQuery('#sidebar').height();
});

function ScrollFunc() {
    /* navbar */
    if (window.pageYOffset >= (jQuery('#nav-wrapper').height()) {
        jQuery('#nav-wrapper').addClass("sticky");
    } else {
        jQuery('#nav-wrapper').removeClass("sticky");
    }

    /* sidebar */
    if (window.pageYOffset >= crazyOffset) {        
        jQuery('#sidebar').addClass('sticky');
    } else {
        jQuery('#sidebar').removeClass("sticky");
    }
}