Jquery 在达到另一个 div 的 50% 高度时显示 div

Question

我使用此代码在到达.wpgb-layout末尾时隐藏.wp-filter

jQuery(window).bind('scroll', function() {
if(jQuery(window).scrollTop() >= jQuery('.wpgb-layout').offset().top + jQuery('.wpgb-layout').outerHeight() - window.innerHeight) {
jQuery('.wp-filter').fadeOut();
}
});

但是，我需要修改此代码，以便在用户滚动至少 50% 的高度时.wp-filter也淡入.wpgb-layout

Answer 1

只需添加另一个if子句，检查您的scrollTop()值是否高于0.5.wpgb-layout

jQuery(window).bind('scroll', function() {
let wpbgHeight = jQuery('.wpgb-layout').outerHeight();
let wpbgTopOffset = jQuery('.wpgb-layout').offset().top;
let innerHeight = window.innerHeight;
if(jQuery(window).scrollTop() >= wpbgHeight + wpbgTopOffset - window.innerHeight) {
jQuery('.wp-filter').fadeOut();
}
if(jQuery(window).scrollTop() <= 0.5*wpbgHeight + wpbgTopOffset - window.innerHeight) {
jQuery('.wp-filter').fadeIn();
}
});