Jquery 使导航栏回到固定位置时具有动画效果

正如你所看到的，我制作了一个导航条，当你向下滚动时，它会粘在页面的顶部，并成功地用一个技巧设置了动画。问题是，当它粘回到页面顶部时，我无法使它具有动画效果。我使用的是bootstrap3

HTML

JAVASCRIPT

var offset = 220;
var duration = 500;
jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('#totop').removeClass('colapsed');
        jQuery('#navigation').addClass('navbar-fixed-top');
        jQuery('#navigation').removeClass('navbar-static-top');

        jQuery('#nav-shop').addClass('fixed-top');
        jQuery('#search').addClass('fixed-top');

    } else {
        jQuery('#totop').addClass('colapsed');
        jQuery('#navigation').removeClass('navbar-fixed-top');
        jQuery('#navigation').addClass('navbar-static-top');

        jQuery('#nav-shop').removeClass('fixed-top');
        jQuery('#search').removeClass('fixed-top');
    }
});

if (jQuery(this).scrollTop() > offset_stuck) {
    jQuery('body').addClass('navbar-stuck');
    // …
} else {
    jQuery('body').removeClass('navbar-stuck');
    // …
}

---

==编辑====

极简主义的例子：

使用引导，导航组件有两种状态：

导航栏静态顶部

：在流中（即非绝对/固定/相对）

navbar固定顶部

：具有

位置：固定

和

顶部：0

动画是从顶部开始的幻灯片。我们只需添加一个具有不同

top

值的类和

transition:top 1s ease

（我们可以用

all

替换

top

，以设置其他属性的动画，如不透明度等）

在向上滚动时，我们删除类

navbar fixed top

。导航栏不再是

位置：固定的
，而是在流中瞬间。所以，我们不能有隐藏动画

工作区将使用第三种状态，就像在：

navbar static top
（从顶部在0到100px之间滚动）：在流中
导航栏固定顶部
（在100px下滚动）：我们已固定导航栏，但未显示它
导航栏下移
（在220px下滚动）：我们显示导航栏
注意：
#导航。实际上不需要导航栏静态顶部
，在
#导航
中重命名此规则会更简单

CSS

#navigation.navbar-fixed-top { 
    /* … */
    top: -100px;
}
#navigation.navbar-show-down {
    top: 0;
}

JAVASCRIPT

var offset_stuck = 100;
var offset_show_down = 220;
jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > offset_stuck) {
        jQuery('#navigation').addClass('navbar-fixed-top');
        jQuery('#navigation').removeClass('navbar-static-top');
        // …
    } else {
        jQuery('#navigation').removeClass('navbar-fixed-top');
        jQuery('#navigation').addClass('navbar-static-top');
        // …
    }
    if (jQuery(this).scrollTop() > offset_show_down) {
        jQuery('#navigation').addClass('navbar-show-down');
    } else {
        jQuery('#navigation').removeClass('navbar-show-down');
    }
});

别说了

当您使用
导航栏固定顶部组件时，您还需要垫上
车身
（查看大警告）：


CSS

JAVASCRIPT

var offset = 220;
var duration = 500;
jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('#totop').removeClass('colapsed');
        jQuery('#navigation').addClass('navbar-fixed-top');
        jQuery('#navigation').removeClass('navbar-static-top');

        jQuery('#nav-shop').addClass('fixed-top');
        jQuery('#search').addClass('fixed-top');

    } else {
        jQuery('#totop').addClass('colapsed');
        jQuery('#navigation').removeClass('navbar-fixed-top');
        jQuery('#navigation').addClass('navbar-static-top');

        jQuery('#nav-shop').removeClass('fixed-top');
        jQuery('#search').removeClass('fixed-top');
    }
});

if (jQuery(this).scrollTop() > offset_stuck) {
    jQuery('body').addClass('navbar-stuck');
    // …
} else {
    jQuery('body').removeClass('navbar-stuck');
    // …
}

我认为在else
jQuery（'#navigation'）.addClass（'navbar-static-top'）可能是造成它的原因，删除这一行，然后尝试删除它，删除我在iti上的唯一动画我只是不明白，我尝试使用此代码，但它没有动画，我也不完全理解你所做的。我也不知道身体填充物是如何影响一切的（当然，除了填充物本身），我创建了一个极简主义的JSFIDLE来向您展示：我想我明白了。所以我们有第三种状态，它实际上是固定状态的一种变体，所以它可以使它产生动画？（顺便说一句，这个编辑很有效，非常感谢！）
if (jQuery(this).scrollTop() > offset_stuck) {
    jQuery('body').addClass('navbar-stuck');
    // …
} else {
    jQuery('body').removeClass('navbar-stuck');
    // …
}