Question

我有两个功能：

1）该框在页面加载时隐藏。当用户向下滚动页面时，应该滑入一个框。当他们选择关闭框时，框会隐藏。

2）当他们关闭这个盒子时，这个盒子应该在导航到其他页面时保持关闭（我使用cookies来做到这一点），

尝试将两个函数一起实现似乎是问题并且彼此冲突。有人可以给我一些指导，因为当将滚动功能放在cookie中时它会完全隐藏盒子。

这是代码（所有代码单独工作）：

滚动代码：

jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > 200) {
            jQuery('#test').stop().animate({ left: '0' });
        } else {
            jQuery('#test').stop().animate({ left: '-25%' });
        }
    });

Cookie代码

$(document).ready(function() {

  // If the 'hide cookie is not set we show the message
  if (!readCookie('hide')) {
    $('#test').show();
  }
  // Add the event that closes the popup and sets the cookie that tells us to
  // not show it again until one day has passed.
  $('#close').click(function() {
    $('#test').hide();
    createCookie('hide', true, 1)
    return false;
  });

});

// ---
// And some generic cookie logic
// ---
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}
});

html虚拟文字

<div id="test">poup with stuff in it
    <a href="JavaScript:void(0)" id="close">close</a>
</div>

我是一个新手用户，所以我知道我有工作代码，只是将2放在一起，任何帮助都会得到满足。

Answer 1

您是否在使用CSS display: none;属性进行初始显示时隐藏了div？我可以让你的代码像这个小提琴一样工作：http://jsfiddle.net/t35cq/1/。

CSS：

.main {
    height: 1000px;
}
.test {
    display: none;
    position: absolute;
    left: -100%;
    top: 150px;
    border: 1px solid black;
}

HTML：

<div class='main'>
    <div id="test" class='test'>poup with stuff in it <a href="JavaScript:void(0)" id="close">close</a>

    </div>
</div>

JavaScript的：

// ---
// And some generic cookie logic
// ---
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 20) {
        jQuery('#test').stop().animate({
            left: '0'
        });
    } else {
        jQuery('#test').stop().animate({
            left: '-100%'
        });
    }
});

// Manually display or hide using code.
//createCookie('hide', true, 1);
eraseCookie('hide');

$(document).ready(function () {
    // If the 'hide cookie is not set we show the message
    if (!readCookie('hide')) {
        console.log('x');
        $('#test').show();
    }
    // Add the event that closes the popup and sets the cookie that tells us to
    // not show it again until one day has passed.
    $('#close').click(function () {
        $('#test').hide();
        createCookie('hide', true, 1)
        return false;
    });

});

将两个功能合并在一起

1 个答案: