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 link

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

}）;

防止滚动jquery脚本运行两次

3 个答案: