Skip to content

原生javascript实现导航栏吸顶

Notifications You must be signed in to change notification settings

qq547176052/-javascript-

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

导航栏的吸顶效果非常简单,可以说没有技术难度可言,但是既然遇到了,还是选择记录下来,可能会帮到部分小白。(demo链链接在最后面)

实现原理非常简单:

1.编写一个吸顶的css样式

2.封装一个获取滚动条位置的函数;

3.用window.onscroll =function(){}实时监听滚动条。

4.通过滚动条的位置判断,当大于某个指定值的时候(这里设置为50),改变导航栏的样式,实现吸顶效果。

About

原生javascript实现导航栏吸顶

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%