Question

想要根据if / else的scroll（）检查隐藏或显示div。我的剧本是这样的。

$(window).scroll(function () {

if($(this).scrollTop() > 400){

            $("#div1").delay(100).fadeIn();
            $("#div2").delay(200).fadeIn();
            $("#div3").delay(300).fadeIn();
            $("#div4").delay(400).fadeIn();
            $("#div5").delay(500).fadeIn();
} else
    $(".task-bubble").css("display", "none");

});

看看JSFiddle http://jsfiddle.net/NXVTw/

它的工作原理是否正常，但是其他工作不正常

如果scrolltop（）＆gt; 400然后显示其他diplay none，但是当我srcoll 400以上的滚动条它不完美时请看看。

任何建议。

Answer 1

每次触发滚动事件时，您都会淡化元素。

尝试检测if语句的结果是否发生变化：

(function() {
    var scrolled = false;
    $(window).scroll(function() {
        var pos = $(this).scrollTop() > 400;
        if( pos != scrolled) {
            if( pos) {
                $("#div1").delay(100).fadeIn();
                // ...
            }
            else $(".task_bubble").css("display","none");
            scrolled = pos;
        }
    });
})();

Answer 2

您需要使用stop（true）停止fadeIn（）动画并清除队列：

http://jsfiddle.net/NXVTw/2/

$(".task-bubble").stop(true).css("display", "none");

Answer 3

$(window).scroll(function () {

if($(this).scrollTop()) > 400){

            $("#div1").delay(100).fadeIn();
            $("#div2").delay(200).fadeIn();
            $("#div3").delay(300).fadeIn();
            $("#div4").delay(400).fadeIn();
            $("#div5").delay(500).fadeIn();
} 
else {
    $(".task-bubble").css("display", "none");
}
});

试试。

Answer 4

$（window）.scroll（function（e）{
if（$（this）.scrollTop（）＆gt; 400）{
            $（ “＃DIV1”）延迟（100）.fadeIn（）;
            $（ “＃DIV2”）延迟（200）.fadeIn（）;
            $（ “＃DIV3”）延迟（300）.fadeIn（）;
            $（ “＃DIV4”）延迟（400）.fadeIn（）;
            $（ “＃DIV5”）延迟（500）.fadeIn（）;
    e.preventDefault（）;
其他的     $（“。task-bubble”）。css（“display”，“none”）;

}）;

在条件中使用e.preventDefault（）。

if / else无法正常工作

4 个答案: