粘性导航栏（使用HTML和CSS、JAVASCRIPT）

最新推荐文章于 2023-05-25 15:40:50 发布

qq_58460470

最新推荐文章于 2023-05-25 15:40:50 发布

阅读量898

点赞数 2

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_58460470/article/details/125129952

版权

index.html(html和JavaScript部分)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性导航栏</title>
</head>
<body>
    <div class="header">
        <nav id="navbar">
            <img src="images/logo.png" class="logo">
            <ul id="menu">
                <li>商家</li>
                <li>关于</li>
                <li>服务</li>
                <li>产品</li>
                <li>联系我们</li>
            </ul>
        </nav>
    </div>
<script>
    //导航栏
var navbar = document.getElementById("navbar");
    var menu = document.getElementById("menu");
    window.onscroll = function(){
        if(window.pageYOffset >= menu.offsetTop){
            navbar.classList.add("sticky");
        }
        else{
            navbar.classList.remove("sticky");
        }
    }
</script>
</body>
</html>

style.css（css部分）

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}
  /* 导航栏*/
.header{
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
nav{
    width: 100%;
    padding: 40px 0;
    text-align: center;
}
.logo{
    width: 150px;
    margin: 10px 0;
    cursor: pointer;
}
nav ul{
    background:#000;
    width: 100%;
    margin-top: 5px;
}
nav ul li{
    display: inline-block;
    list-style: none;
    margin: 20px 30px;
    color: #fff;
}
nav.sticky{
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 8%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.5s;
    z-index: 2;
}
nav.sticky ul{
    width: auto;
}

效果图：

开始的时候

当滚动条往下拉拉动时，会一直跟在网页顶部

属性sticky的简介

position:sticky是css定位新增属性；可以说是static（没有定位）和fixed（固定定位）的结合使用，它主要用在对scroll事件的监听上。

在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时，position:sticky这时的效果相当于fixed的定位，固定到适当位置。

sticky使用条件

1、父元素不能overflow:hidden或者overflow:auto属性。

2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

3、父元素的高度不能低于sticky元素的高度

4、sticky元素仅在其父元素内生效

position的属性值

属性值名	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过"left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位，元素的位置通过"left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。
static	默认值，没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。