经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)
来源:cnblogs  作者:永恒之月TEL  时间:2022/1/18 16:31:14  对本文有异议

通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回到顶部按钮回到顶部,并隐藏按钮,鼠标移动到顶部导航栏出现,鼠标移出导航栏后3秒后再次隐藏(导航栏和按钮都是固定定位)

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JavaScript_test</title>
  6. <style>
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. height: 3000px; /*让滚动条出现*/
  11. }
  12. .DW {
  13. display: flex; /*固定定位*/
  14. justify-content: center; /*让文字水平居中*/
  15. align-items: center; /*让文字垂直居中*/
  16. width: 100%;
  17. height: 80px;
  18. background-color: green; /*背景颜色绿色*/
  19. color: aliceblue;
  20. font-size: 2em;
  21. transition: top .5s linear; /*导航栏过渡出现和隐藏*/
  22. position: fixed; /* 绝对定位,不管滚动条上下滚动都在相应的位置*/
  23. top: -80px; /*隐藏导航栏*/
  24. left: 0;
  25. }
  26. .goTop {
  27. width: 50px;
  28. height: 50px;
  29. background-color: aquamarine;
  30. font-size: 20px;
  31. text-align: center;
  32. line-height: 25px;
  33. color: azure;
  34. position: fixed; /*固定定位*/
  35. bottom: 50px;
  36. right: 50px;
  37. display: none; /*隐藏按钮*/
  38. }
  39. .fusu {
  40. position: fixed; /*固定定位*/
  41. width: 100%;
  42. height: 10px;
  43. left: 0;
  44. top: 0;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="fusu divTop" id="divtop"></div>
  50. <div class="DW topdhl divdhl" id="dhl">导航栏</div>
  51. <buttion class="goTop" id="gotop">回到顶部</buttion>
  52. <script>
  53. //获取导航栏、按量、顶部div的元素
  54. var topw=document.getElementById("dhl")
  55. var goTop=document.getElementById("gotop")
  56. var divTop=document.getElementById("divtop")
  57. //滚动滚动条触发事件
  58. window.onscroll=function(){
  59. //获取滚动条位置
  60. var jhlheight=document.documentElement.scrollTop||document.body.scrollTop
  61. //判断滚动条位置
  62. if(jhlheight>=300){
  63. goTop.style.display="block" //显示按钮
  64. }else{
  65. goTop.style.display="none" //隐藏按钮
  66. }
  67. }
  68. //点击按钮事件
  69. goTop.onclick=function(){
  70. window.scrollTo({ //设置滚动条位置
  71. top:0, //回到顶部
  72. behavior:"smooth" //平滑过渡
  73. })
  74. }
  75. //鼠标移入div后触发的事件
  76. var ss=divTop.onmouseover=function(){
  77. var tar=topw.style.top="0px"
  78. }
  79. //鼠标移入导航栏触发的事件
  80. topw.onmouseover=function(){
  81. var tar=topw.style.top="0px"
  82. }
  83. //鼠标移出导航栏后触发的事件
  84. topw.onmouseout=function(){
  85. //定时器函数
  86. setTimeout(function(){
  87. topw.style.top="-80px"
  88. },3000)
  89. }
  90. </script>
  91. </body>
  92. </html>

本文来自博客园,作者:永恒之月TEL,转载请注明原文链接:https://www.cnblogs.com/akc4/p/15818335.html

原文链接:http://www.cnblogs.com/akc4/p/15818335.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号