Question

在页面上滚动三分之一后会出现一个div。里面有一个关闭按钮。通过单击关闭按钮，即使重新加载页面后，div也将在接下来的10分钟内消失（出于测试目的，让时间为5秒）。我为此无法正确编写jQuery。

这里是fiddle of my work。主要问题是重新加载页面后，如果单击关闭按钮后突然滚动，则会显示隐藏的div，而无需等待5秒钟。

var closeOnce;
var hide = localStorage.getItem('hide');
    
function showDiv() {
  if ($(window).scrollTop() > $('body').height() / 5) {
    $('#banner-message').slideDown();       
  } 
};

function countDown() {
  setTimeout(function(){
    closeOnce = false;
    showDiv();
  }, 5000);
};

$('body').on('click', '.close', function() {
  $('#banner-message').slideUp();
  closeOnce = true;
  localStorage.setItem('hide', 'true');
  countDown();
});

$(window).on('scroll', function() {
  if(!hide) {
    if (!closeOnce) {
      showDiv()
    }
  } else {
    countDown();
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.instruction {
  background: #ccc;
  height: 600px;
  margin-bottom: 40px;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  display: none;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="instruction">
  <h1>Scroll down to appear a div</h1>
</div>

<div id="banner-message">
  <p>Hello World</p>
  <button class="close">close</button>
</div>

Answer 1

如果您不介意使用Cookie，则可以安装jQuery cookie plugin并在单击关闭按钮时使用当前时间戳设置一个：

$('body').on('click', '.close', function() {
  $.cookie('closed', new Date().getTime());
});

然后滚动查看当前时间和单击按钮的时间之间的时差（如果有）

$(window).on('scroll', function() {
  var closeTime = $.cookie('closed');
  if (closeTime) {
    var diff = new Date().getTime() - closeTime;
    if (diff > 10 * 60 * 1000) {
      $.removeCookie('closed');
      // show div
    }
  }
});

我应该注意，您不需要此插件来设置/读取/删除cookie，但是由于无论如何您都使用jQuery，因此这是最简单的解决方案。

Answer 2

您已经使事情变得复杂了，setTimeout不会记住刷新页面后的时间，它只会重新启动计时器，因此您需要将localStorage设置为隐藏时间，并与滚动显示的当前时间进行比较：

https://jsfiddle.net/vzatgnrm/9/

//scroll function
$(window).on('scroll', function() {
  //compare differene between hidden and current time, 5 seconds or if hidden time is null
  if(new Date().getTime() - localStorage.getItem("hiddenTime") > 5000 || localStorage.getItem("hiddenTime") == null) {
    if ($(window).scrollTop() > $('body').height() / 5) {
      $('#banner-message').slideDown();
    }
  }
});

//close button click
$('body').on('click', '.close', function() {
  $('#banner-message').slideUp();

  //set closed time to storage
  localStorage.setItem("hiddenTime", new Date().getTime())
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.instruction {
  background: #ccc;
  height: 600px;
  margin-bottom: 40px;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  display: none;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<div class="instruction">
  <h1>Scroll down to appear a div</h1>
</div>

<div id="banner-message">
  <p>Hello World</p>
  <button class="close">close</button>
</div>

即使重新加载页面jQuery后也会隐藏div几次

2 个答案: