Question

我希望scrollTop只触发一次，这样红色框在用按钮关闭后不会再出现。

我知道有.one（），但我不知道如何将它应用到我的代码中。下面是我的代码和jsfiddle。

<div id="box-pop">This is a red box.
    <button class="box-close">Close</button>
</div>


$(document).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#box-pop').fadeIn(500);
    }
});
$(document).ready(function () {
    $(".box-close").click(function () {
        $("#box-pop").fadeOut(200)
    });

});

http://jsfiddle.net/3LG6t/3/

Answer 1

为了在您的网页中获得更好的效果，请注意这一点？

$("#box-pop").fadeOut(200,function(){
    $(this).remove();
});

演示：http://jsfiddle.net/3LG6t/5/

看看这个主题：

Answer 2

一个使用与bind或on相同的方式。滚动本身确实不是一个实际的功能，而是一个执行以下功能的快捷方式：

.on('scroll', function () {

}

但是你需要在一个条件之后得到一些工作，所以你在使用后会使用。

<div id="box-pop">This is a red box.
    <button class="box-close">Close</button>
</div>


$(document).on('scroll', function fadeBoxIn() {
    if ($(this).scrollTop() > 100) {
        $('#box-pop').fadeIn(500);
        $(document).off('scroll', fadeBoxIn);

    }
});
$(document).ready(function () {
    $(".box-close").click(function () {
        $("#box-pop").fadeOut(200)
    });

});

请参阅fiddle。

Answer 3

尝试$( "document").unbind( "scroll" );：

$(document).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('#box-pop').fadeIn(500);
  }
});
$(document).ready(function () {
  $(".box-close").click(function () {
    $("#box-pop").fadeOut(200)
    $(document).unbind("scroll");        
  });
});

或有条件地重新绑定$(".box-close").click()中的滚动功能。

Answer 4

如果您使用scroll进行其他功能，则需要创建单独的函数，否则请参阅@ Gavin42示例

fadeInBox = function () {
    if ($(window).scrollTop() > 100) {
        $('#box-pop').fadeIn(500);
    }
}

$(document).on('scroll', fadeInBox);
$(document).ready(function () {
    $(".box-close").click(function () {
        $(document).off('scroll', fadeInBox);
        $("#box-pop").fadeOut(200);
    });
});

让scrollTop（）只执行一次

4 个答案: