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

固定导航栏

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

  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.

上一篇： 用cookie实现简单的用户自定义页面样式

下一篇： Qwery - 多用途企业商务网站模板WordPress主题

推荐阅读