记录一下导航栏下滑隐藏,上滑显示代码

2022/08/16 19:18 · 网站建设 ·  原创文章 · 2,860 阅读 · 0评论

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

不会自己写代码的人只能依靠百度,还好,百度一下这点能力还是有的,一下子就找到了合适的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;
}
本文地址:https://www.zuoyv.com/179
版权声明:本文为原创文章,版权归 Choi 所有,欢迎分享本文,转载请保留出处!

文件下载

上一篇:
下一篇:

 评论


表情