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

固定导航栏

程序员文章站 2022-03-13 13:56:40
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

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

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>固定导航栏</title>
    8. 

  8.     <style>
    9. 

  9.         *{
    10. 

  10.             margin:0;
    11. 

  11.             padding:0;
    12. 

  12.         }
    13. 

  13.         #one{
    14. 

  14.             background:goldenrod;
    15. 

  15.             height:100px;
    16. 

  16.             width:500px;
    17. 

  17.            font-size:20px;
    18. 

  18.         }
    19. 

  19.         #two{
    20. 

  20.             background:rgb(109, 240, 245);
    21. 

  21.             height:500px;
    22. 

  22.             width:500px;
    23. 

  23.             font-size:20px;
    24. 

  24.         }
    25. 

  25.         #three{
    26. 

  26.             background:rgb(247, 157, 194);
    27. 

  27.             height:500px;
    28. 

  28.             width:500px;
    29. 

  29.             font-size:20px;
    30. 

  30.         }
    31. 

  31.     </style>
    32. 

  32. </head>
    33. 

  33. <body>
    34. 

  34.     <div id="one">这是顶部</div>
    35. 

  35.     <div id="two">这是中间</div>
    36. 

  36.     <div id="three">这是尾部</div>
    37. 

    38. 

  38.     <script>
    39. 

    40. 

  40.      window.onload = function() {
    41. 

  41.          var one = document.getElementById('one');
    42. 

  42.          var two = document.getElementById('two');
    43. 

  43.          var three = document.getElementById('three');
    44. 

    45. 

    46. 

  46.      window.onscroll=function(){
    47. 

  47.         if(document.documentElement.scrollTop >= one.offsetHeight ){
    48. 

  48.                     one.style.cssText="position:fixed;top:0px;";
    49. 

  49.                     two.style.marginTop = one.offsetHeight+"px";
    50. 

    51. 

  51.                 }else {
    52. 

  52.                     one.style.cssText="position:static;";
    53. 

  53.                     two.style.marginTop ='0px';
    54. 

    55. 

  55.                 }
    56. 

  56.             }
    57. 

  57.      }    
    58. 

    59. 

    60. 

  60.     </script>
    61. 

  61. </body>
    62. 

  62. </html>
    63.

固定导航栏

固定导航栏

上一篇： github的clone有安装不了依赖的问题错误代码128，设置GitHub代理

下一篇： 日历的制作

推荐阅读