Javascript 当滚动时，如何使我的粘性导航栏在两个方向上都工作？

多亏了TylerH，我已经为向下滚动设置了动画，但我希望在向上滚动时动画会反转。我将假设我需要一个额外的javascript函数才能工作，因此目前：

以下是新的CSS（添加了.unfixed属性）：

下面是使用粘性导航的Javascript：

<script type="text/javascript">
$(document).ready(function() {

var aboveHeight = 205;

    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

$（文档）.ready（函数（）{
var高于高度=205；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>高于高度）{
$（'sticknav'）.addClass（'fixed'）.css（'top'，'0'）.next（）.css（'padding-top'，'60px'）；
}否则{
$（'sticknav'）.removeClass（'fixed'）.next（）.css（'padding-top'，'0'）；
}
});
});

我需要找到一个激活的方法。取消一次修复。修复会取消激活，但听起来很复杂。我需要它激活后，用户才卷回。修复激活。是的，听起来很复杂，任何帮助都将不胜感激。希望有更简单的方法。

---

可以在上找到我想要的示例。

尝试下面的代码，并使用CSS

transition

属性，而不是

animation

，它看起来比

animation

更简单

stickynav{ 
     background: #b50000;
     height: 46px;
     width: 1080px;
     margin-right: 0px;
     margin-left: 413px;
     left: 0px;
     right: 0px;
     position: relative;
     z-index: 9999;
     border-bottom: 4px solid #e50000;
     webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.49);
     box-shadow: 0 2px 6px rgba(0,0,0,0.49);
     transition:width 500ms; //Add this
}
.fixed { 
    position:fixed;
    margin-left:0px;
    width:100%;
    top:0px;
}

你

js

会是：

$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight)
           $('stickynav').addClass('fixed')
        else
           $('stickynav').removeClass('fixed')
});  

---

你的问题有一个简单的解决办法。为了使用

动画

并保留最终结果，而不是在完成后将其重置，您需要应用

将动画移动到

.fixed

而不是

.sticknav

（这将在向下滚动时添加

.fixed

而不是页面加载时播放动画），并添加

动画填充模式

：

.fixed {
    position: fixed;
    animation: fill 11s linear;
    animation-fill-mode: forwards;
}

我还强烈建议您使用外部CSS文件，而不是将所有CSS放在

标签中。

工作解决方案

尝试

左边距：92px而不是
左边距：413px

sticknav {
   background: #b50000;
   height: 46px;
   width: 1080px;
   margin-right: 0px;
   margin-left: 92px;
   left: 0px;
   right: 0px;
   position: relative;
   z-index: 9999;
   border-bottom: 4px solid #e50000;
   webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.49);
   box-shadow: 0 2px 6px rgba(0,0,0,0.49);
   animation-name: fill;
   animation-duration: 12s;
}

输出

您能制作一个jsfiidle.com或其他东西，让我们可以试用您的代码，看看是否能让它正常工作吗？如果你能让我们更容易，你可能会让更多的人看。是的，我不知道这是不是很可能。我会看看我能做些什么，但现在我要给我的博客添加一个链接。@MarkSchauer你能不能也给帖子本身添加必要的HTML？在文章中有一个自包含的演示会有帮助，而不必去你的博客上查看代码的运行情况。这会使标题跳到左边，然后扩展到屏幕的右边缘。@TylerH。给我一点时间。。让我为你创建一个演示。我将这些添加到他的帖子中的站点OP中；这是我观察到的行为。它被称为stickynav的原因是允许导航首先是粘性的。在我的HTML中，我使用和来知道如何获取固定标题。我为此使用了一个教程，所以如果它非常低效，我道歉。我确信名称并不重要。你能给出与上述元素相关的css的完整代码吗？我知道，但一旦我上下滚动，它就不会再执行动画了。划掉它，它就工作了。谢谢！现在，有没有一种方法可以让它在我向上滚动的时候慢慢回到原来的位置，而不是突然弹回来？填充模式“两者”都能做到吗？@MarkSchauer为了实现这一点，您可能需要交换类；e、 g.
如果{on scroll up，class=.fixed，remove.class&add.standard}
或其他什么（我不太懂JavaScript，所以语法显然会有点不同，但这就是要点）。然后创建一个名为
.default
的动画类，该类名为
unfill
或其他东西，并为其提供
@关键帧
，这些关键帧基本上与原始
@关键帧
的作用相反。@MarkSchauer，您可以将
动画
移回
.sticknav
和/或使用JavaScript在向下/向上滚动时播放动画。这很有意义。我会调查一下，但我的编码技能还不够。但我想这就是互联网的作用，是吗？编辑：我想我知道我必须做什么。我会更新这个，如果它的工作与否。
sticknav {
   background: #b50000;
   height: 46px;
   width: 1080px;
   margin-right: 0px;
   margin-left: 92px;
   left: 0px;
   right: 0px;
   position: relative;
   z-index: 9999;
   border-bottom: 4px solid #e50000;
   webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.49);
   box-shadow: 0 2px 6px rgba(0,0,0,0.49);
   animation-name: fill;
   animation-duration: 12s;
}