https://www.kali.org/ 就是这个网页顶部的效果怎么做的 就是往下滑动的时候高度会变小,希望能得到各位的解答。我看了这个页面源代码,太杂乱了
监听页面滚动,在滚动到一定位置后触发一个函数,这个函数给这个 head 增加一个新的 className,变成小的样式,然后这种缓动的效果,可以用 css3 transition http://www.w3school.com.cn/cssref/pr_transition.asp
1.监视当前滚动条的位置 window.onScroll
2.判断是否滚动到了理想的区域
3.如果滚动到了理想区域想要变化导航栏,给导航栏addClass(带有transform或者animation的样式)
4.如果离开了理想区域,移除那个removeClass
其實做法都大同小異,我這裡是利用 jQuery
監聽滾動條來增刪 class
,順便加個 transition
讓整個動畫平滑點。
實現
jsFiddle
就是用CSS布局,监视页面滚动位置,当滚动到一定的位置就触发修改CSS,再使用一些过度动画就搞定了