Question

我对这个问题很小。我想在触摸页脚时隐藏元素x，它可以工作（当触摸页脚时它完全不可见）但不知何故，当我滚动时它会添加每隔一个像素类＆＃34;隐藏＆＃34;然后删除它。实际上，当在页脚上方滚动时它会闪烁。我该如何解决？

MultiByteToWideChar

Answer 1

当您使用多个元素时，您需要单独检查每个元素的offset()并根据条件切换hidden类。

$(window).scroll(function() {
    var windowOuterHeight = $(this).outerHeight();
    var footerOffSetTop = $('.footer-home').offset().top;

    //Iterate x elements
    $(".x").each(function(){

        //Cache variables
        var self = $(this);

        //add/remove class based on state
        self.toggleClass('hidden', (self.offset().top + windowOuterHeight) >= footerOffSetTop);
    });
});

Answer 2

首先，修复你的JS：

if ($('.x').offset().top + $('.x').outerHeight() > $('.footer-home').offset().top) { ... } else { ... }

您必须检查固定元素的outerHeight，而不是此（=窗口）。

你的闪烁问题 - 如果你通过display隐藏元素：none CSS，jQuery的高度为0px，所以使用visibility：hidden;代替。

选中此JSFiddle

当他触摸页脚时，将类添加到固定元素

2 个答案: