时间戳

首页 > 解决方案 > 如果一段时间后没有悬停或单击，如何隐藏和显示 div

javascript - 如果一段时间后没有悬停或单击，如何隐藏和显示 div

问题描述

我想在滚动上显示一个粘性导航栏，如果我停止滚动并且不单击它或不将鼠标悬停在它上面，导航栏就会消失。我添加了导航栏的粘性功能，它工作正常。但是，如果我不滚动并且不单击它或不将鼠标悬停在其上五秒钟，我将无法隐藏。

标签： javascripthtmlcss

解决方案

滚动与单击或悬停不同，我将告诉您如何隐藏或显示它是否不滚动您可以通过单击或悬停应用相同的方法，但在这种情况下，您将使用一个整数，每次单击或悬停都会增加。

1-定义一个名为previousScroll的变量将为其分配一个值document.documentElement.scrollTop;并且这个变量将帮助我们检查用户是否改变了滚动位置（滚动与否）

2-当用户滚动第一件事时添加滚动事件监听器我们将清除我们将在下一步设置的先前超时它还将显示带有 style.display="block" 或 css 类的导航栏

3-最后一件事将设置超时，它将在 5 秒后调用，以检查前一个滚动是否相等，document.documentElement.scrollTop;如果它们相等，则用户不会滚动 5 秒，因为如果他滚动，那么这个值会改变如果是这样，我们可以隐藏导航栏，当他再次滚动时，它会出现，依此类推代码示例。

const navMenu = document.querySelector(".navbar");

let myVar;

function checkScroll() {
  myVar = setTimeout(function(){ 
     if (document.documentElement.scrollTop == lastTop){
       navMenu.style.display = "none";
     }
  
  }, 5000);
}

function clearTimeoutFunction() {
  clearTimeout(myVar);
}

let lastTop = 0;
window.addEventListener("scroll", ()=>{
  clearTimeout(myVar);
  navMenu.style.display = "block";
  lastTop = document.documentElement.scrollTop;
  checkScroll();
});
body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h1>Fixed Top Menu</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

推荐阅读