导航栏点击后悬停

html-css023

导航栏点击后悬停,第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

}