当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.
当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35px; background-color:#3399FF; margin-top:100px; } .div2_1{ position:fixed; width:100%; height:35px; z-index:999; background-color:#3399FF; top:0px; _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } .div2_2 { display:none; } </style> <script type="text/javascript"> window.onscroll=function(){ var t=document.documentElement.scrollTop||document.body.scrollTop; var div2=document.getElementById("div2"); if(t>= 100){ div2.className = "div2_1"; }else{ div2.className = "div2"; } } </script> </head> <body> <div class="div1"> <div id="div2" class="div2"></div> </div> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架