防止滚动jQuery脚本运行两次

Question

我是jquery新手，将以下代码放在一起，以使DIV在设置向下滚动量后显示。 如果向上滚动，则DIV消失。 可选地，一旦DIV出现，就有一个链接将其关闭。 除了我只希望脚本运行一次之外，所有这些都按预期工作。 现在，如果我向上滚动，则再次出现黄色框。 如何确保盒子保持关闭状态？ 作为另一种选择，我可以集成cookie或localStorage吗？

非常感谢！ 拉斯。

Javascript：

$(function () {
    var target = $(".box");
    if ($(window).scrollTop() > 30) {
        target.hide();
    }
    $(window).scroll(function () {
        var pos = $(window).scrollTop();
        if (pos > 30) {
            target.stop(true, true).fadeIn('slow');
        } else {
            target.stop(true, true).fadeOut('slow');
        }
    });
    $('a.close').click(function () {
        $($(this).attr('href')).slideUp();
        return false;
    });
}); 

这是我的代码的jsfiddle链接 ： jsfiddle链接

Answer 1

您可以删除该类以确保该框保持在removeClass() 。 或直接在动画后使用$(".box").remove() 。 您可以将此选项与cookie一起存储，但是如果客户端删除其cookie，它将会丢失。

Answer 2

试试这个http://jsfiddle.net/AbwXu/4/

var notdisplayed=true;
$(function(){ 
    var target = $(".box");
    if($(window).scrollTop() > 30){
      target.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 30  && notdisplayed){
            target.stop(true, true).fadeIn('slow');

        } else {
            target.stop(true, true).fadeOut('slow');
            notdisplayed=false;
        }
    });
    $('a.close').click(function() {
        $($(this).attr('href')).slideUp();
        notdisplayed=false;
        return false;
    });

Answer 3

您可以从窗口中删除事件滚动，并为localStorage做类似的事情：

$(function () {
    var target = $(".box");
    if ($(window).scrollTop() > 30) {
        target.hide();
    }
    $(window).scroll(function () {
        var pos = $(window).scrollTop();
        if (pos > 30) {
            target.stop(true, true).fadeIn('slow');
        } else {
            target.stop(true, true).fadeOut('slow');
        }
        if(localStorage['noNotification'] == 'true'){
            $(window).off('scroll');
        }
    });
    $('a.close').click(function () {
        $($(this).attr('href')).slideUp();
        $(window).off('scroll');
        localStorage['noNotification'] = 'true';
        return false;
    });

}）;