导航栏点击后悬停

html-css015

导航栏点击后悬停,第1张

无论是悬停导航栏，还是悬停搜索栏，原理都是一样的，运用CSS的position:fixed，通过滚动条上下滑动时计算导航栏的位置，当滚动条下拉到看不见导航栏时，触发特效代码，将导航栏悬停在顶部位置固定不动；当滚动条上拉到导航栏可见时，再还原原本的位置。

提供三种自定义导航栏悬浮的方法

在自定义组件中设定css 样式:

利用 position: fixed

利用 position: fixed

纯css实现。这个小圆点应该是一个a标签：

a{

width: 6px

height: 6px

float: right

margin-right: 6px

background-color: black

border-radius: 50%

}

a:hover{

width: 12px

height: 12px

}