菜单导航效果(Navbar)

最后更新: 2025-11-11 | 浏览次数: 511|组件以及效果

粘性定位特效(sticky)

当页面滚动时,可以让元素在滚动过程中“粘”在屏幕上的某个位置，当滚动区域大于目标元素区域时，目标元素将粘贴在页面固定位置不再随页面滚动，反之则随页面滚动

系统通过为元素添加属性：data-sticky="classname" ,当滚动区域大于目标元素区域时，会附加classname样式

HTML代码：

<nav class="menu" data-sticky="sticky-nav">
 ...
</nav>

CSS代码


.sticky-nav {
  background: #000;
}
.sticky-nav .nav-link {
  color: #fff;
}

案例演示程序已默认引入系统CSS和Javascript默认核心文件

See the Pen Sticky by Huijun Yang (@hongge) on CodePen.

元素采用position:fixed定位，当页面滚动时，即开始为指定了data-fixed属性的元素附加css样式，相较于粘性定位，可以实现更多的功能和交互效果

属性名	默认值	必须	说明
data-fixed	“”	是	当页面开始滚动时的CSS Class名称
data-offset	0	否	页面滚动偏移距离(px)后开始执行,不指定则一旦滚动则立即执行
data-delay	100	否	效果延迟执行时间(毫秒)，一旦滚动则立即执行
data-scroll	“”	否	页面上下滚动时交互是的CSS Class名称

HTML代码

<nav class="menu" data-fixed="fixed-menu" data-offset="50">
 ...
</nav>

CSS代码

.menu{
   background:#f2ff2;
}
.fixed-menu .logo{
   max-width:150px
}

案例演示程序已默认引入系统CSS和Javascript默认核心文件

基础效果

效果说明：当元素超出滚动页面可视区域时，固定在顶部，并附加样式切换背景

See the Pen Default fixed by Huijun Yang (@hongge) on CodePen.

上下滚动效果

效果说明：当元素超出滚动页面可视区域时，页面上滑时隐藏元素，页面下滑时显示元素，页面在顶部时恢复原状

See the Pen Advanced fixed by Huijun Yang (@hongge) on CodePen.