“理解”；在滚动条上隐藏导航条；代码-Javascript

我正在学习JS，我有一个测试页面，在那里我练习我的新“发现”

我在Youtube（）上学习了如何根据滚动事件隐藏/显示导航栏的教程。我把它应用到我的测试页面上，当然它工作得很好，你可以从代码片段中看到，但是我在理解2个特殊点时遇到了一些困难。希望有人能用“糟糕”的字眼来解释

因此，这里是滚动事件的JS代码

*{
保证金：0；
填充：0；
框大小：边框框；
}
洛甘迪肯先生{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景：粉蓝；
填充：.7em0；
}
.标志{
左侧边缘：.5em；
}
.汉堡{
右边距：1米；
z指数：2；
}
.汉堡.皮{
显示：无；
}
海军ulli a{
文字装饰：无；
颜色：黑色；
字体系列：verdana；
}
李国荣{
文本对齐：居中；
列表样式：无；
}
导航{
填充：1em 0；
线高：2米；
背景：浅绿色；
显示：无；
}
主动导航{
显示：块；
}
西贡先生{
位置：绝对位置；
右：1em；
显示：无；
}
.西贡{
显示：块；
}
标题{
宽度：100vw；
位置：固定；
}
header.hide{
显示：无；
}
主要{
垫顶：4em；
}

标志





Lorem ipsum dolor sit amet，奉献精英。比如说，动物的生命周期，时间周期，时间周期，时间周期。我们的发明者是维尼安的临时秘书。在温和和温和的环境中，动物的选择是正确的。Expedita deserunt，ab dolor accusamus sequi eum optio。这是一个很好的解释！Accusamus，别名，非。在自然和选择权方面，cupiditate saepe quisquam totam laboriosam ullam nihil Constructure rem earum of Perpiciatis。发明者多洛雷斯·卡斯（dolores quas）的身份是什么？智慧的平等性是一种选择，它阻碍了人们的生存和发展。现代建筑设计师赞颂beatae repellat harum deleinit Face在软骨病预防中的作用，并再次强调解决面部问题的方法——耳部问题的解决方案——自由、持续、健康、体弱！在这一点上，我们认为，作为一种非温和的生活方式，我们必须承认自己的真实性，并承认自己的最大利益。托塔姆·康塞特图·卡斯·伊帕。当然，即使是圣人的代表，理性地说，这是对上帝的惩罚。这是一个很好的机会，一个很好的机会，一个很好的机会！溶质，暂时性溶质，暂时性溶质，暂时性溶质，暂时性溶质。我们的发明者是维尼安的临时秘书。在温和和温和的环境中，动物的选择是正确的。Expedita deserunt，ab dolor accusamus sequi eum optio。这是一个很好的解释！Accusamus，别名，非。在自然和选择权方面，cupiditate saepe quisquam totam laboriosam ullam nihil Constructure rem earum of Perpiciatis。发明者多洛雷斯·卡斯（dolores quas）的身份是什么？智慧的平等性是一种选择，它阻碍了人们的生存和发展。现代建筑设计师赞颂beatae repellat harum deleinit Face在软骨病预防中的作用，并再次强调解决面部问题的方法——耳部问题的解决方案——自由、持续、健康、体弱！在这一点上，我们认为，作为一种非温和的生活方式，我们必须承认自己的真实性，并承认自己的最大利益。托塔姆·康塞特图·卡斯·伊帕。当然，即使是圣人的代表，理性地说，这是对上帝的惩罚。这是一个很好的机会，一个很好的机会，一个很好的机会！非面部溶质？

我会尽力解释，然后提供注释掉的代码

它不完全是视口的高度，window.pageYOffset计算您从窗口顶部向下滚动的距离。加载页面时，该数字为0。我建议退房

然后，当您滚动时，当前偏移量设置为prev，新偏移量设置为current。您可以尝试

console.log（current，prev）

并查看它在上下滚动时的变化。当prev和current都有值时，将对它们进行比较，如果

current>prev

，则显示元素

prev=current

用于保存以前的偏移量，以便将新的当前值与之进行比较

const header = document.querySelector("header");
let prev = window.pageYOffset; // 0 when page loads, otherwise stores previous 'current' value

window.addEventListener("scroll", function () {
  let current = window.pageYOffset; // your current offset from the top of the document

  // Add console.log(current, prev) here if you want to see how the offset changes, you'll notice that prev value is always smaller when you scroll down and bigger when you scroll up

  if (prev < current) {
    header.classList.add("hide");
  } else {
    header.classList.remove("hide");
  }

  prev = current; // Set current variable to prev variable so there's something to compare
});

const header=document.querySelector（“header”）；
设prev=window.pageYOffset；//加载页面时为0，否则存储以前的“当前”值
window.addEventListener（“滚动”），函数（）{
让current=window.pageYOffset；//当前距文档顶部的偏移量
//在这里添加console.log（current，prev）如果您想查看偏移量的变化，您会注意到，向下滚动时prev值总是较小，向上滚动时prev值总是较大
如果（上一次<当前）{
header.classList.add（“hide”）；
}否则{
header.classList.remove（“隐藏”）；
}
prev=current；//将当前变量设置为prev变量，以便进行比较
});

我会尽力解释，然后提供注释掉的代码

它不完全是视口的高度，window.pageYOffset计算您从窗口顶部向下滚动的距离。加载页面时，

const header = document.querySelector("header");
let prev = window.pageYOffset; // 0 when page loads, otherwise stores previous 'current' value

window.addEventListener("scroll", function () {
  let current = window.pageYOffset; // your current offset from the top of the document

  // Add console.log(current, prev) here if you want to see how the offset changes, you'll notice that prev value is always smaller when you scroll down and bigger when you scroll up

  if (prev < current) {
    header.classList.add("hide");
  } else {
    header.classList.remove("hide");
  }

  prev = current; // Set current variable to prev variable so there's something to compare
});

const header = document.querySelector('header');

let prev = window.pageYOffset;
console.log("Start State for prev:" + prev); //debug for initial point

window.addEventListener('scroll', function(){

let current = window.pageYOffset;
console.log("Current State for current:" + current); //debug for current point when you scroll

// you will see which condition is happen now 
// when you start scroll down "prev" is always smaller than "current".So condition is true, header will hide.
// when you scroll up "prev" is always smaller than "current".So condition is true, header will hide.

if(prev < current){
    header.classList.add('hide');
}
else {
    header.classList.remove('hide');
}

//But you want to show scroll up, you need to put current to prev.
prev = current;

})