Question

嗨我尝试在我滚动到页面底部时显示一个div，当它不在底部时隐藏它。警报消息在底部页面工作但设置css可见或尝试使用fadeIn或out不起作用。我需要一些帮助来看看我做错了什么。

同样在IE 9上，div “＃loadSection”隐藏了它，但我仍然可以将光标放在它上面并在其他浏览器正常工作时单击。

这是我的代码。

$(window).scroll(function() {       
    if ($(window).scrollTop()+$(window).height() > $(document).height()){
        $("#loadSection").fadeTo(0,0).css('visibility','visible');
        alert("bottom");
    }else{
        $("#loadSection").fadeTo(0,0).css('visibility','hidden');
    }

});

Answer 1

visibility属性允许元素保留在页面上并占用空间。要在IE中解决您仍然可以将鼠标悬停在它上面的问题，请改用display属性。

对于您的主要问题，请尝试以下操作：

var loadsection = $("#loadSection");
if ($(window).scrollTop() >= $(document).height() - $(window).height()){
    if ( loadsection.is(':hidden') ) loadsection.fadeIn();
}else{
    if ( loadsection.is(':visible') ) loadsection.fadeOut();
}

fadeIn和fadeOut将使用display属性，当元素不可见时，它将完全删除元素。此外，在两个fadeTo调用中，您的淡入淡出为零，因此即使设置了可见性，该元素仍然完全透明。

Answer 2

问题是fadeIn / Out会出现滚动的每一位，并导致div闪烁。这是一个CSS动画选项：

$(window).scroll(function() {   
    if ($(window).scrollTop()+$(window).height() >= $(document).height()){
        $("#loadSection").addClass('visible');
    }else{
        $("#loadSection").removeClass('visible');
    }
});

样本： http://jsfiddle.net/Eh53d/

jquery $（window）.scroll bottom并使div可见不起作用

2 个答案: