javascript实现垂直导航在可视区范围显示

来源:互联网 发布:宝信软件同花顺 编辑:程序博客网 时间:2024/06/05 03:41

在可视区显示:

 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(); //垂直楼层导航滚动条事件 }
阅读全文
0 0