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 属性的值。 |