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