使scrollTop()只执行一次

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/

看一下这个话题:

detach()， hide()和remove()的区别- jQueryjQuery detach() v/s remove() v/s hide()为什么remove()或detach()而不是hide()?

Answer 2

One的用法与bind或on is相同。Scroll本身并不是一个真正的函数，而是on的快捷方式，它执行以下操作:

.on('scroll', function () {
}

然而，你需要在一个条件之后让某些东西工作，所以你会在使用on之后使用off。

<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)
    });
});

看小提琴。

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);
    });
});