网站往下滚动之后顶部导航栏高度变小如何制作？

Question

https://www.kali.org/ 就是这个网页顶部的效果怎么做的 就是往下滑动的时候高度会变小，希望能得到各位的解答。我看了这个页面源代码，太杂乱了

Answer 1

其實做法都大同小異，我這裡是利用 jQuery 監聽滾動條來增刪 class，順便加個 transition 讓整個動畫平滑點。

實現

jsFiddle

Answer 2

就是用CSS布局，监视页面滚动位置，当滚动到一定的位置就触发修改CSS，再使用一些过度动画就搞定了

Answer 3

监听页面滚动，在滚动到一定位置后触发一个函数，这个函数给这个 head 增加一个新的 className，变成小的样式，然后这种缓动的效果，可以用 css3 transition http://www.w3school.com.cn/cssref/pr_transition.asp

Answer 4

1.监视当前滚动条的位置 window.onScroll
2.判断是否滚动到了理想的区域
3.如果滚动到了理想区域想要变化导航栏，给导航栏addClass（带有transform或者animation的样式）
4.如果离开了理想区域，移除那个removeClass