• 使用css 与 js 两种方式实现导航栏吸顶效果

    position的属性我们一般认为有
    position:absolute
    postion: relative
    position:static 
    position:fixed
    position:inherit;
    position:initial;
    position:unset;
    但是我最近发现了一个定位position:sticky 这个可以称为粘性定位。
    这个粘性定位的元素会始终在那个位置
     

    1. <style>
    2.     body {
    3.         margin: 0;
    4.     }
    5.     
    6.     .header {
    7.         width: 100%;
    8.         height: 80px;
    9.         line-height: 80px;
    10.         background-color: pink;
    11.         text-align: center;
    12.         font-size: 30px;
    13.         color: #fff;
    14.     }
    15.     
    16.     .navbar {
    17.         width: 100%;
    18.         height: 60px;
    19.         line-height: 60px;
    20.         background-color: green;
    21.         text-align: center;
    22.         /* 兼容 */
    23.         position: -webkit-sticky;
    24.         position: -ms-sticky;
    25.         position: -o-sticky;
    26.         /* 粘性定位*/
    27.         position: sticky;
    28.         left: 0;
    29.         top: 0;
    30.         color: #fff;
    31.     }
    32.     
    33.     .content {
    34.         height: 140px;
    35.         background: rgb(13, 68, 218);
    36.         margin-top: 4px;
    37.         text-align: center;
    38.         line-height: 140px;
    39.     }
    40. </style>
    41. <body>
    42.     <div class="header">我是头部信息</div>
    43.     <div class="navbar" id="navbar">我是导航栏</div>
    44.     <div class="content"> 我是内容 </div>
    45.     <div class="content"> 我是内容 </div>
    46.     <div class="content"> 我是内容 </div>
    47.     <div class="content"> 我是内容 </div>
    48.     <div class="content"> 我是内容 </div>
    49.     <div class="content"> 我是内容 </div>
    50.     <div class="content"> 我是内容 </div>
    51. </body>

    position:sticky 的特征的（坑）

    1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里。
    2、样式表 z－index 无效。行内 style 写有效。【这个我没有去验证过】

    js检测浏览器是否支持sticky属性
    1. if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    2.     console.log('支持')
    3. }
    使用js实现滚动效果

    当滚动高度 > 元素距离顶部的位置 我们需要 { 添加类,让元素固定定位}；否者移除类。
    当滚动高度 > 元素距离顶部的位置 让占位元素显示在页面中。否者隐藏起来
     

    1. <style>
    2.     body {
    3.         margin: 0;
    4.     }
    5.     
    6.     .header {
    7.         width: 100%;
    8.         height: 100px;
    9.         background-color: pink;
    10.         text-align: center;
    11.         line-height: 100px;
    12.     }
    13.     
    14.     .navbar {
    15.         width: 100%;
    16.         height: 40px;
    17.         line-height: 40px;
    18.         background-color: green;
    19.         text-align: center;
    20.     }
    21.     
    22.     .position {
    23.         width: 100%;
    24.         height: 40px;
    25.     }
    26.  
    27.     
    28.     .fixed {
    29.         position: fixed;
    30.         top: 0;
    31.         left: 0;
    32.     }
    33.     
    34.     .hidecss {
    35.         display: none
    36.     }
    37.     
    38.     .content {
    39.         height: 1140px;
    40.         background: rgb(13, 68, 218);
    41.         margin-top: 4px;
    42.         text-align: center;
    43.         line-height: 140px;
    44.     }
    45. </style>
    46. <body>
    47.     <div class="header">头部信息栏</div>
    48.     <div class="navbar" id="navbar">中部导航栏</div>
    49.     <!-- 占位要不然滚动的时候下面的内容就会顶上去原来的位置，导致一部分内容显示不完整-->
    50.     <div class="position hidecss" id="position"></div>
    51.     <div class="content"> 我是内容 </div>
    52. </body>
    53. 下面是js代码
    54.     var navbar = document.getElementById('navbar')
    55.     var position = document.getElementById('position')
    56.     var navbarTop = navbar.offsetTop; // 获取导航栏到父元素的顶部距离
    57.     // 监听滚动
    58.     window.onscroll = function() {
    59.         // 获取滚动条距离顶部的距离
    60.         var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    61.         // 滚动高度>元素距离顶部的位置时添加类，否则移除类
    62.         scrollTop > navbarTop ? navbar.classList.add('fixed') : navbar.classList.remove('fixed')
    63.             // 控制占位内容是否显示
    64.         scrollTop > navbarTop ? position.classList.remove('hidecss') : position.classList.add('hidecss')
    65.     }
    66.
    分享一下上面使用 原生js——操作类名（HTML5新增classList）
    1. classList.add( newClassName )；添加新的类名，如已经存在，取消添加。
    2. 可以使用扩展运算符添加多个类。或者多个类使用逗号隔开
    3. div.classList.add("foo", "bar", "baz"); //或者多个类使用逗号隔开
    4. //扩展运算符添加多个类
    5. let manyclassArr = ['leiming1', 'leiming2']
    6. domDiv.classList.add(...manyclassArr)
    7.  
    8. 移除已经存在的类名;
    9. classList.remove( oldClassName )
    10. //移除多个类值
    11. div.classList.remove("foo", "bar", "baz");
    12.  
    13. 确定元素中是否包含指定的类名，返回值为true 、false；不可以检测多个类名
    14. classList.contains( oldClassName );
    15.  
    16.  
    17. 如果classList中存在给定的值，删除它，否则，添加它；
    18. classList.toggle( className )；
    19.  
    20. classList.replace( oldClassName，newClassName )；
    21. 将oldClassName，newClassName类名替换为oldClassName，newClassName。

  • 相关阅读:
    如何做好水库大坝实时安全监测
    【PAT甲级】1052 Linked List Sorting
    使用 JavaScript 和 CSS 的简单字符计数器
    汽车自动驾驶是人工智能吗,自动驾驶是人工智能
    3款免费的录屏软件推荐，轻松录制高质量视频
    新库上线 | CnOpenData农产品批发价格数据
    Java--XML简介
    mysql主从和mycat读写分离的安装及验证
    在Windows系统中查找GitBash安装位置
    [Linux 基础] Linux使用git上传gitee三板斧
  • 原文地址：https://blog.csdn.net/weixin_41542329/article/details/133698620