jQuery动画滑动顶部固定导航

我在使用某些功能时遇到了一些问题

我的头球绝对位于英雄形象上方。当用户向下滚动时，我希望导航从顶部显示并处于固定位置（但滑入）。然后，当用户向上滚动时，导航将在“英雄导航再次显示”之前向上滑动

基本上就像这个网站：

我已经设法让它的一半工作（从顶部向下滑动），但只有当收割台的初始顶部位置为0px时。请看：（）-然而，它也不会向后滑动-只是突然消失

这是我加价的基本情况

<header>
    This is a header
</header>
<div class="hero">
    <!-- hero image -->
    <img src="http://placekitten.com/g/500/300" />
</div>
<section class="content">
    LONG PAGE CONTENT
</section>

到目前为止，jQuery

var nav = $('body');
var scrolled = false;

$(window).scroll(function () {

    if (200 < $(window).scrollTop() && !scrolled) {
        nav.addClass('fixed');
        $('header').animate({top: 0},0);
        scrolled = true;
    }

   if (200 > $(window).scrollTop() && scrolled) {
        nav.removeClass('fixed');
        $('header').removeAttr('style');
        scrolled = false;      
    }
});

var-nav=$（'body'）；
var scrolled=false；
$（窗口）。滚动（函数（）{
如果（200<$（窗口）.scrollTop（）&&！已滚动）{
资产净值增加类别（“固定”）；
$（'header'）.animate（{top:0}，0）；
滚动=真；
}
if（200>$（窗口）.scrollTop（）&已滚动）{
导航移除类（“固定”）；
$（'header'）.removeAttr（'style'）；
滚动=假；
}
});

这是一个提琴示例，我的导航从顶部以40px的速度显示：

（这是从底部设置动画的幻灯片，因为顶部为40px）

你知道我要怎样才能达到我想要的效果吗？谢谢大家

编辑-这里是最后一个工作jQuery。我还必须从标题中删除CSS转换

var nav = $('body');
var scrolled = false;

$(window).scroll(function () {
if (200 < $(window).scrollTop() && !scrolled) {
    nav.addClass('fixed'); 
    $('header').animate({top: 0}, 1000);
    scrolled = true;
  }

  if (200 > $(window).scrollTop() && scrolled) {
    $('header').animate({top: -80}, 200, function() {
        nav.removeClass('fixed');
        $('header').removeAttr('style');
    });
    scrolled = false;
  }
}); 

var-nav=$（'body'）；
var scrolled=false；
$（窗口）。滚动（函数（）{
如果（200<$（窗口）.scrollTop（）&&！已滚动）{
资产净值增加类别（“固定”）；
$（'header'）.animate（{top:0}，1000）；
滚动=真；
}
if（200>$（窗口）.scrollTop（）&已滚动）{
$（'header'）.animate（{top:-80}，200，function（）{
导航移除类（“固定”）；
$（'header'）.removeAttr（'style'）；
});
滚动=假；
}
}); 

---

我相当肯定，您最大的问题是您没有在代码中实际设置滚动动画。尽管如此，当我尝试它时，我发现出于某种原因，在与滚动动画相同的if语句中删除了固定的类，不知怎么搞砸了一切。尽管如此，这仍然可以正常工作：

var nav = $('body');
var scrolled = false;

$(window).scroll(function () {

  if (100 < $(window).scrollTop() && !scrolled) {
    $("header").css({top: "-80px"}); 
  }

  if (150 < $(window).scrollTop() && !scrolled) {
    nav.addClass('fixed');   
  }

  if (200 < $(window).scrollTop() && !scrolled) {
    $('header').animate({top: 0});
    scrolled = true;
  }

  if (200 > $(window).scrollTop() && scrolled) {
    $('header').animate({top: -80});
    scrolled = false;
  }
  if (100 > $(window).scrollTop() && scrolled) {
    nav.removeClass('fixed');
    $('header').removeAttr('style');
  }
});

---

animate（）

中的匿名函数是一个

complete（）

，这意味着它在继续之前会等待动画完成。当您的

CSS

中仍有

转换

声明时，我无法将该概念应用到您的滚动中以折叠if语句。非常感谢您的回复，但它仍然没有达到预期效果。当它第一次向下滚动时，它不是来自顶部。请看：我编辑了上面的代码，因此它现在来自顶部。我还解释了为什么我认为这比需要的复杂。非常感谢！我不知道CSS转换会引起问题！我使用了您编辑的代码，然后对其进行了轻微更改（在动画之后添加了一个函数），最终使其工作符合我的喜好-如果没有您，我不可能完成它！对于那些感兴趣的人，这里是修改后的代码（我也会在顶部编辑）：非常欢迎！不知道你是否发现了这一点，但我只是重新测试并不得不修改它，使

scrolled=false'

在

complete（）

之外，因为否则它将永远向上滚动。我还相信，作为提问者，你可以接受这个答案，这在功能上不同于简单地向上投票。

var nav = $('body');
var scrolled = false;

$(window).scroll(function () {

  if (100 < $(window).scrollTop() && !scrolled) {
    $("header").css({top: "-80px"}); 
  }

  if (150 < $(window).scrollTop() && !scrolled) {
    nav.addClass('fixed');   
  }

  if (200 < $(window).scrollTop() && !scrolled) {
    $('header').animate({top: 0});
    scrolled = true;
  }

  if (200 > $(window).scrollTop() && scrolled) {
    $('header').animate({top: -80});
    scrolled = false;
  }
  if (100 > $(window).scrollTop() && scrolled) {
    nav.removeClass('fixed');
    $('header').removeAttr('style');
  }
});

var nav = $('body');
var scrolled = false;

$(window).scroll(function () {
  if (200 < $(window).scrollTop() && !scrolled) {
    nav.addClass('fixed'); 
    $('header').animate({top: 0}, 1000);
    scrolled = true;
  }

  if (200 > $(window).scrollTop() && scrolled) {
    scrolled = false;
    $('header').animate({top: -80}, 1000, function(){          
      nav.removeClass('fixed');
      $('header').removeAttr('style');
    });
  }
});