菜单导航效果(Navbar)

粘性定位特效(sticky)

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

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

如何使用

HTML代码：

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

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样式，相较于粘性定位，可以实现更多的功能和交互效果

如何使用

HTML代码

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

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.