今天突发奇想想折腾一下导航栏,看别人的导航栏下滑就隐藏,上滑就显示,也想弄一个。

不会自己写代码的人只能依靠百度,还好,百度一下这点能力还是有的,一下子就找到了合适的JS代码。简单易懂,稍微改一下即可。

估计大部分主题都通用,合适的拿去。

// 导航栏下滑隐藏,上滑显示
// 代码来自https://juejin.cn/post/6844903978518446087
var scrollTopLast = 0;
window.onscroll=function(e){
var scrollTop = e.target.scrollingElement.scrollTop;
if(scrollTop > scrollTopLast){
console.log("滑轮向下滚动");
$(".header").css("transition", "0.5s")
$(".header").css("opacity", "0")
}else{
console.log("滑轮向上滚动");
$(".header").css("transition", "0.5s")
$(".header").css("opacity", "1")
}
console.log(e.target.scrollingElement.scrollTop);
scrollTopLast = scrollTop;
}