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
- javascript实现垂直导航在可视区范围显示
- 让div在浏览器可视范围居中
- bootstrap实现垂直导航框架
- bootstrap实现垂直导航框架
- bootstrap实现垂直导航框架
- 如何让div始终保持在浏览器可视范围的中间
- [前端]判定元素是否在可视范围的方法总结
- Android的LisTView 条目过多,最后一条在可视范围
- 下拉垂直导航菜单功能实现
- 纯css实现垂直导航栏
- iOS根据坐标数据点所在的坐标区域来动态显示到可视范围
- iOS根据坐标数据点所在的坐标区域来动态显示到可视范围
- 可视字符的编码范围
- javascript实现导航栏
- 动态菜单(永远在屏幕的可视区域显示)
- 垂直导航/侧面导航
- GXT grid 设置某一行被选中, 并把选中的行放在可视的范围
- qt 窗口无标题在桌面移动,不可移出可视范围之外
- Windows Socket 编程_单个服务器对多个客户端简单通讯
- LeetCode[567]Permutation in String(Java)
- I2S音频总线学习(一)数字音频技术
- bzoj 2748 音量调节 DP 解题报告
- 数据降维---LLE(Locally Linear Embedding)---局部线性嵌入(1)
- javascript实现垂直导航在可视区范围显示
- 完成1500万元Pre-A轮融资 火绒为何牵手天融信?
- Excel2013打印时怎么固定表头及表尾让打印后的每页都可以看得到
- Struts.xml的参数传递
- MyBatis 延迟加载,一级缓存,二级缓存设置
- Quazip在Windows下压缩Ubuntu下解压出现的乱码问题
- anaconda 和facenet
- JVM(1):Java 类的加载机制
- java.sql.SQLException: Io 异常: Connection reset