Jquery 带动画的引导导航粘贴（向下滑动/向下滑动）

希望创建一个行为类似于导航的导航

以下代码导致我的导航在越过

数据偏移顶部

位置后向下滑动（向下滚动页面），但我不知道如何在越过

数据偏移顶部

位置时向上滑动导航（向上滚动页面）

---

有没有人能用小提琴来操纵像这样的导航？谢谢

我试图用Bootstrap 3实现与您需要的相同的功能，但没有成功。因此，创建自定义粘性导航比使用引导粘贴更容易

在我的场景中，导航应该在通过滚动达到某个像素偏移量后变得粘滞。到达该点之前，导航将隐藏。当它显示时，它会从顶部滑动。当我向后滚动时，它会滑到远离屏幕的顶部

HTML部分

添加任何内容到div中，我有一个徽标和主导航

<div id="menu-bar"></div>

JavaScript部分

我使用jQuery，也许你可以不用它，但它比这个解决方案复杂得多。无论如何，您都可以使用jQuery进行引导

var $document = $(document),
    $element = $('#menu-bar');

$document.scroll(function() {
    if ($document.scrollTop() >= 850) {
        $element.stop().css({
            top: '0px'
        });
    } else {
        $element.stop().css({
            top: '-200px'
        });
    }
});

---

看到它在行动！我添加了一些样式，这样就可以很容易地看到粘性元素。

可能晚了，但我仍然为您提供了一个答案：）

#menu-bar {
    position: fixed;
    top: -200px;
    width: 100%;
    transition: top 0.5s ease 0s;
    -webkit-transition: top 0.5s ease 0s;
    -moz-transition: top 0.5s ease 0s;
    -o-transition: top 0.5s ease 0s;
}

var $document = $(document),
    $element = $('#menu-bar');

$document.scroll(function() {
    if ($document.scrollTop() >= 850) {
        $element.stop().css({
            top: '0px'
        });
    } else {
        $element.stop().css({
            top: '-200px'
        });
    }
});