jQuery 固定侧边栏在滚动时闪烁
jQuery fixed sidebar flickering on scroll
我正在尝试使 header 和侧边栏在滚动时变粘。 header 很好。侧边栏也保持不变,但不断闪烁。我在某处读到这是由于 Chrome 错误造成的,但这个问题是普遍存在的。
当我尝试通过开发人员工具进行调试时,我可以看到 class "sticky" 不断添加和删除到侧边栏,这与 header.
不同
任何见解将不胜感激。
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;
}
固定:
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");
}
}
我正在尝试使 header 和侧边栏在滚动时变粘。 header 很好。侧边栏也保持不变,但不断闪烁。我在某处读到这是由于 Chrome 错误造成的,但这个问题是普遍存在的。
当我尝试通过开发人员工具进行调试时,我可以看到 class "sticky" 不断添加和删除到侧边栏,这与 header.
不同任何见解将不胜感激。
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; }
固定:
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");
}
}