粘性导航用css和jquery跳转

Question

我正在尝试构建粘性导航，但问题是当scrollTop达到300px时，我的导航跳得太快，我想顺利滚动它，我不确定问题出在哪里（为什么导航跳出来（弹跳））。

https://jsfiddle.net/7mgLkk53/1/

jsfiddle

Answer 1

您可以使用css3过渡属性使其在课程.main-head-scrolled

上更流畅

Fiddle link

Answer 2

更改你的scrollTop像素逻辑，如果它更多那么0然后添加“main-head-scrolled”类

$(this).scrollTop() > 0 

这是一个工作小提琴

https://jsfiddle.net/7mgLkk53/3/