首页 前端知识 滚动条滚动时头部导航栏固定在页面顶部的几种简单方法

滚动条滚动时头部导航栏固定在页面顶部的几种简单方法

2024-02-11 10:02:07 前端知识 前端哥 982 8 我要收藏

一、使用css直接用固定定位position: fixed。

适合使用在导航栏有固定高度,避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。

示例代码:

<style>
*{
 margin: 0;
 padding: 0;
}
p{
 height: 500px;
}
section{
 padding-top: 40px;
}
div{
 height: 40px;
 width: 100%;
 color: white;
 background-color: crimson;
 position: fixed;
 top: 0;
}
</style>
<section>
        <div id="Head">head</div>
        <p style="background-color: aquamarine;">11111111111111111111</p>
        <p style="background-color: salmon;">2222222222222222</p>
        <p style="background-color: royalblue;">333333333333</p>
        <p style="background-color: aqua;">444444444444444</p>
        <p style="background-color: burlywood;">555555555555555</p>
        <p style="background-color: green;">666666666666666</p>
        <p style="background-color: teal;">777777777777777</p>
        <p style="background-color: chartreuse;">88888888888888</p>
</section>

效果:

 

二、结合js动态添加css属性position: fixed;定位。

适合不确定导航栏高度,不能调整导航栏下面盒子的top高度。

示例代码:

<style>
        div{
            font-size: 50px;
            width: 100%;
            color: white;
            background-color: crimson;
        }
</style>
<script>
   let Head = document.getElementById('Head')
   window.onscroll = ()=>{
      // 获取滚动距离
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      if (top != 0) {
         Head.style = "position: fixed;top: 0;"
      }else{
         Head.style = "position: static;"
      }
    }
</script>

效果:

 

三、使用position: sticky;

这个超简单,不用js,不用确定导航栏高度纯css,除了有些浏览器需要兼容。是css3新添加的属性。

示例代码:

div{
   font-size: 40px;
   width: 100%;
   color: white;
   background-color: crimson;
   position: sticky;/* 新属性sticky */
   top: 0;/* 距离页面顶部距离 */
}

效果:

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1763.html
标签
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!