菜单导航效果

最后更新: | 浏览次数: 1185|开发文档

粘性定位特效(sticky)

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

css通过position:sticky实现粘性定位，但无法在实现定位的同时附加相应的样式变化,系统通过为元素添加属性：data-sticky="classname" ,当滚动区域大于目标元素区域时，会附加classname样式

如何使用

HTML代码：

<div class="menu" data-sticky="sticky-nav">
 htmlcode
</div>

CSS代码

.menu{
   /*必须指定元素position和top属性*/
   position:sticky;
   top:0;
   background:#f2ff2;
}
.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代码

<div class="menu" data-fixed="fixed-menu" data-offset="50">
 htmlcode
</div>

CSS代码

.menu{
   /*必须指定元素position和top属性*/
   position:fixed;
   top:0;
   width:100%;
   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.

文档