javascript - 相对固定位置-如何向下滑动？

我的菜单都准备好了，很好用，而且我现在的JS没有页面到处乱跳，这很好。我遇到的问题是，让我的“固定”导航向上/向下滑动，而不是突然出现。
目前，我使用的jQuery正在激活屏幕下方约300px~处的一个类，这将菜单位置从相对更改为固定。
请注意：我最初设法让这个静态定位，但在我的网站上与z-索引和其他一些元素有困难，所以我希望定位保持相对（不是静态）。我也不想用javascript以任何方式复制菜单（已经看到一些这样做的例子）。
当菜单位置更改为fixed时，如何使用jquery或css来实现slidedown和slideup效果？
下面是我的代码，非常感谢。
HTML格式：

<div class="nt-main-navigation-sticky">
    <!-- my nav, logo, etc, is in here. -->
</div>

CSS:

.nt-main-navigation-sticky {
    position: relative;
}


.activeScroll .nt-main-navigation-sticky {
    position: fixed;
    top: 0;
    left: 0;
}

查询：

// get my header height
var getHeaderHeight = $('.nt-main-navigation-sticky').outerHeight();


// add/remove body class
$(window).scroll(function() {

    if($(window).scrollTop() > getHeaderHeight + 200) {

        $('body').addClass('activeScroll').css('padding-top', getHeaderHeight);

    } else {

        $('body').removeClass('activeScroll').css('padding-top', 0);

    }

});

最佳答案

添加一个转换到您的CSS：

.nt-main-navigation-sticky {
    position: relative;
}


.activeScroll .nt-main-navigation-sticky {
    position: fixed;
    top: -50px; // or whatever the height of the navbar
    left: 0;
    transition: top 600ms;
}

And JS：

if($(window).scrollTop() > getHeaderHeight + 200) {

    $('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
    $('.nt-main-navigation-sticky').css('top', '0px'); // will trigger transition

} else {
    $('.nt-main-navigation-sticky').css('top', '-50px'); // will trigger transition
    $('body').removeClass('activeScroll').css('padding-top', 0);

}

关于javascript - 相对固定位置-如何向下滑动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39010104/