博客列表 >固定导航栏

固定导航栏

风轻云淡
风轻云淡原创
2021年11月29日 11:28:19541浏览
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>固定导航栏</title>
  6. <style>
  7. *{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. #nav{
  12. position: absolute;
  13. }
  14. .img{
  15. width: 1500px;
  16. position: absolute;
  17. }
  18. div{
  19. height: 500px;
  20. width: 1000px;
  21. margin: 0 auto;
  22. }
  23. .box1{
  24. background-color: red;
  25. }
  26. .box2{
  27. background-color: pink;
  28. }
  29. .box3{
  30. background-color: darkcyan;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <nav id="nav">
  36. <img class="img" id="img" src="project/img/nav.png">
  37. </nav>
  38. <div class="box1">
  39. </div>
  40. <div class="box2">
  41. </div>
  42. <div class="box3">
  43. </div>
  44. <script>
  45. var oimg=document.getElementById('img')
  46. window.onscroll= function (){
  47. var ox= document.documentElement.scrollTop
  48. var oy= document.documentElement.scrollLeft
  49. oimg.style.top=ox+'px'
  50. oimg.style.left=oy+'px'
  51. }
  52. </script>
  53. </body>
  54. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议