案例：在滚动条下拉的时候，导航栏是固定的，当下拉卷出的内容在导航条的范围内时，导航条的背景虚化为卷出的内容
固定定位的效果
需求效果：
1、HTML代码文章来源：https://www.toymoban.com/news/detail-541703.html
<style>
* {
margin: 0;
padding: 0;
}
nav {
/* 固定定位 */
position: fixed;
width: 100%;
height: 60px;
}
nav h3 {
text-align: center;
line-height: 60px;
}
.box {
padding-top: 60px;
width: 100%;
height: 800px;
}
</style>
</head>
<body>
<nav>
<h3>导航栏</h3>
</nav>
<div class="box">
<img
src="https://note.mafengwo.net/img/e1/fb/3d3ff2df501ac0f77724e0a954b9f441.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90"
alt="">
</div>
</body>2、给导航条添加样式文章来源地址https://www.toymoban.com/news/detail-541703.html
nav {
/* 固定定位 */
position: fixed;
width: 100%;
height: 60px;
/* 给导航条添加以下效果 */
/* 1、径向渐变 */
background-image: radial-gradient(transparent 2px, #ffffff 2px);
/* 2、背景缩放 */
background-size: 4px 4px;
/* 3、元素后面的区域添加：饱和度 和 模糊效果 */
backdrop-filter: saturate(50%) blur(2px);
}到了这里，关于HTML案例：滚动条下拉后导航栏有网格状效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
