如何使粘性菜单过渡平滑答案

【问题标题】：How to make a sticky menu transition smooth如何使粘性菜单过渡平滑
【发布时间】：2017-03-19 01:27:18
【问题描述】：

我创建了一个粘性菜单，效果很好，但是过渡不流畅，我该怎么做？

我在jquery方面的知识非常有限，如果是很简单的东西我很抱歉，我不知道。

我相信它与 .animate() 一起使用，但我不知道如何在我的代码中应用它。

function stick() {
if ($(this).scrollTop() > 140){  
    $('.header').addClass("sticky");
    $('.logo').addClass("sticky");
    $('.header-menu').addClass("sticky");
    $('.dropdown-content').addClass("sticky");
    $('#mobile-clicker').addClass("sticky");
    $('.hamburguer-img').addClass("sticky");
    $('.active').addClass("sticky");
    $('.active-drop').addClass("sticky");
    $('#searchform').addClass("sticky");
    $('.search-formulario').addClass("sticky");
} else {
    $('.header').removeClass("sticky");
    $('.logo').removeClass("sticky");
    $('.header-menu').removeClass("sticky");
    $('.dropdown-content').removeClass("sticky");
    $('#mobile-clicker').removeClass("sticky");
    $('.hamburguer-img').removeClass("sticky");
    $('.active').removeClass("sticky");
    $('.active-drop').removeClass("sticky");
    $('#searchform').removeClass("sticky");
    $('.search-formulario').removeClass("sticky");
}
}

【问题讨论】：

标签： jquery css menu sticky

【解决方案1】：

我建议你使用原生 javascript 而不是 jquery。对于动画/过渡，我建议使用 CSS 而不是 javascript。

https://www.w3schools.com/css/css3_transitions.asp https://www.w3schools.com/css/css3_animations.asp

【讨论】：