【技术】javascript实现垂直导航在可视区范围显示

最新推荐文章于 2022-03-13 17:21:21 发布

向着光芒的女孩

最新推荐文章于 2022-03-13 17:21:21 发布

阅读量385

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/ann295258232/article/details/78199859

版权

javascript 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

在可视区显示：

 function floorNavScroll() {
     var floorContent = document.getElementsByClassName("block_text")[0];
     var floorContentView = floorContent.getBoundingClientRect();
     var floorNav = document.getElementById("floorNavBox");
     console.log(floorContentView);
     if (floorContentView.top > document.documentElement.clientHeight || (floorContentView.top + floorContentView.height) < 0) { //当楼层区域不在可视范围
         floorNav.style.display = "none";
     } else {
         floorNav.style.display = "block";
     }

 }

 floorNavScroll(); //垂直楼层导航滚动条事件

 window.onscroll = function() {
     floorNavScroll(); //垂直楼层导航滚动条事件
 }

在开始滚动到可视区的一半显示：

 function floorNavScroll() {
     var floorContent = document.getElementsByClassName("block_text")[0];
     var floorContentView = floorContent.getBoundingClientRect();
     var floorNav = document.getElementById("floorNavBox");
     console.log(floorContentView);
     if (floorContentView.top > document.documentElement.clientHeight/2 || (floorContentView.top + floorContentView.height) < 0) { //当楼层区域不在可视范围
         floorNav.style.display = "none";
     } else {
         floorNav.style.display = "block";
     }

 }

 floorNavScroll(); //垂直楼层导航滚动条事件

 window.onscroll = function() {
     floorNavScroll(); //垂直楼层导航滚动条事件
 }