Question

这种情况：

1）我们需要有一个仅在用户滚动一半页面时显示的框（div）。

2）我们希望该框记住用户是否第一次关闭该框。至少有10分钟不会再次显示给用户。

你能帮我吗，我写了一些代码，我可以关闭/隐藏该框，但是当我再次向下滚动时，它再次出现，则该框并没有真正消失。

不使用纯JavaScript jQuery来帮助我完成此操作

我的关闭框代码：

function hide()
{
    document.getElementById('popup').style.display = 'none';
};

我向下滚动时显示框的代码：

window.addEventListener("scroll",function()
{
    if (window.pageYOffset >= 800 )
    {
        document.getElementById('popup').style.display = "block";
    }
}, false);

如果您需要例如的html代码：

<div id="popup" class="popup-container">
    <form action="#" class="popup-form">
    </form>
    <div class="popup-close">
        <span class="fa fa-close" onclick="hide()"></span>
    </div>
</div>

Answer 1

let localStorage = {};
let minTimeDiffSeconds = 5;
// let minTimeDiffSeconds = 10 * 60;
window.addEventListener("scroll",function(){
    if(window.pageYOffset >= 800 ){
        let currentTimeSeconds = Math.round((new Date()).getTime() / 1000);
        //let timeLastClosed = localStorage.getItem('closedTime')
        let timeLastClosed = localStorage.closedTime;
        let timeDiffSeconds = currentTimeSeconds - timeLastClosed;
        if (timeDiffSeconds > minTimeDiffSeconds) {
            document.getElementById('popup').style.display = "block";
        }
    }
},false);
  
function hide() {
    let currentTimeSeconds = Math.round((new Date()).getTime() / 1000);
    //localStorage.setItem('closedTime', currentTimeSeconds);
    localStorage.closedTime = currentTimeSeconds;
    document.getElementById('popup').style.display = 'none';
};

.container {
    height: 2000px;
    width: 200px;
    position: relative;
}
.popup-container {
    position: fixed;
    top: 0;
}

<div class="container">
  <div>
       Permanent Content
  </div>
  <div id="popup" class="popup-container">   
      <form action="#" class="popup-form">
      </form>
      <div class="popup-close">
          <span class="fa fa-close" onclick="hide()">Popup</span>
      </div>
  </div>
</div>

您可以为此使用localstorage。在用户关闭时存储时间戳，并在用户滚动时存储时间戳，您检查是否经过了足够的时间。如果是，则显示弹出窗口。 Stackoverflow不允许使用localstorage，因此我为演示创建了localstorage。您可以使用浏览器的本地存储，也可以直接使用代码。

注意：对于代码段，我将最短时间设置为5秒

Answer 2

保留上次查看时间，检查时间是否到时可以将其重置为可见。单击隐藏后，它将重置。

请注意，您的滚动条会触发很多，可能想消除反弹或抑制该跳动-其他问题回答了该如何做。这不是执行此操作的超级代码版本...我将其设置为1分钟，以便可以看到它，并根据需要进行修改。

var timeLastView;
var hasDelayElapsed = false;
var baseDelay = 1; //minutes to delay

function setViewTime() {
  // convert milliseconds to seconds. 
  timeLastView = (new Date().getTime()) / 1000;
}

function hasTimeElapsed(minutes) {
  var timeCheck = minutes * 60;
  var currentTime = (new Date().getTime()) / 1000;
  if (currentTime - timeLastView >= timeCheck) {
    // then more than 10 minutes elapsed.
    hasDelayElapsed = true;
  } else {
    hasDelayElapsed = false;
  }
  return hasDelayElapsed;
}

function hide() {
  setViewTime();
  document.getElementById('popup').style.display = 'none';
};

window.addEventListener("scroll", function() {
 // lots of logging, probably want to de-bounce this  console.log("scrolling");
  if (window.pageYOffset >= 800 && hasTimeElapsed(baseDelay)) {
    document.getElementById('popup').style.display = "block";
  }
}, false);

.usespace {
  height: 1000px;
}

.popup {
  background-color: #aaaaaa;
}

<div class="usespace">Above the thing</div>
<div id="popup" class="popup-container">
  <form action="#" class="popup-form"> something to see here
  </form>
  <div class="popup-close">
    <span class="fa fa-close" onclick="hide()">closer</span>
  </div>
</div>
<div class="usespace">Howdy below </div>

Answer 3

let isClicked = false;

window.addEventListener("scroll", function () {
    if (!isClicked && window.pageYOffset >= 800) {
        document.getElementById('popup').style.display = "block";
    }
}, false);

function hide() {
    document.getElementById('popup').style.display = 'none';

    isClicked = true;
    setTimeout(() => {
        isClicked = false;
    }, 10 * 60 * 1000);
};

<div style="background-color: #f2f2f2; height: 1200px;">
    Content div
</div>
<div id="popup" class="popup-container">
    <form action="#" class="popup-form">
        POP UP
    </form>
    <div class="popup-close">
        <span onclick="hide()">X</span>
    </div>
</div>

您可以执行以下操作-

如果盒子被关闭，请保留一个变量来存储。
let isClosed = false;
在hide()函数中将其值设置为true。
在检查scroll offset的同时，还要检查isClosed的值。
if(!isClosed && window.pageYOffset >= 800 ){...
在超时结束后，使用setTimeout()重置isClosed的值。

这是脚本的示例-

let isClosed = false;

function hide() {
    document.getElementById('popup').style.display = 'none';

    isClosed = true;
    setTimeout(function() {
        isClosed = false;
    }, 10 * 60 * 1000);
};

window.addEventListener("scroll",function(){
    if(!isClosed && window.pageYOffset >= 800 ){
        document.getElementById('popup').style.display = "block";
    }
}, false);

Answer 4

隐藏它后，可以使用setTimeOut避免在10分钟内再次显示div。小心， setTimeOut（）参数使用毫秒。

签出：https://www.w3schools.com/jsref/met_win_settimeout.asp

那是你的问题吗？

第一次关闭div，它将在10分钟后不再显示

4 个答案: