欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

固定导航栏

程序员文章站 2022-03-13 13:58:46
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5. <title>固定导航栏</title>
    6. 

  6. <style>
    7. 

  7.     *{
    8. 

  8.         padding: 0;
    9. 

  9.         margin: 0;
    10. 

  10.     }
    11. 

  11.     #nav{
    12. 

  12.         position: absolute;
    13. 

  13.     }
    14. 

  14.     .img{
    15. 

  15.         width: 1500px;
    16. 

  16.         position: absolute;
    17. 

  17.     }
    18. 

  18.     div{
    19. 

  19.         height: 500px;
    20. 

  20.         width: 1000px;
    21. 

  21.         margin: 0 auto;
    22. 

  22.     }
    23. 

  23.     .box1{
    24. 

  24.         background-color: red;
    25. 

  25.     }
    26. 

  26.     .box2{
    27. 

  27.         background-color: pink;
    28. 

  28.     }
    29. 

  29.     .box3{
    30. 

  30.         background-color: darkcyan;
    31. 

  31.     }
    32. 

  32. </style>
    33. 

  33. </head>
    34. 

  34. <body>
    35. 

    36. 

  36. <nav id="nav">
    37. 

  37.     <img class="img" id="img" src="project/img/nav.png">
    38. 

  38. </nav>
    39. 

  39. <div class="box1">
    40. 

    41. 

  41. </div>
    42. 

  42. <div class="box2">
    43. 

    44. 

  44. </div>
    45. 

  45. <div class="box3">
    46. 

    47. 

  47. </div>
    48. 

    49. 

  49. <script>
    50. 

  50.     var oimg=document.getElementById('img')
    51. 

  51.      window.onscroll= function (){
    52. 

    53. 

  53.         var ox= document.documentElement.scrollTop
    54. 

  54.         var oy= document.documentElement.scrollLeft
    55. 

  55.         oimg.style.top=ox+'px'
    56. 

  56.         oimg.style.left=oy+'px'
    57. 

    58. 

    59. 

  59.     }
    60. 

  60. </script>
    61. 

    62. 

  62. </body>
    63. 

  63. </html>
    64.

上一篇： 保存用户设置练习

下一篇： JavaScript简单计算器

推荐阅读