jQuery 动画滑动顶部固定导航

Question

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

我有一个标题绝对定位在英雄形象之上。当用户向下滚动时，我希望导航从顶部出现并处于固定位置(但滑入)。然后，当用户向上滚动时，导航会在“再次显示主导航”之前向上滑动。

基本喜欢这个网站:http://www.invisionapp.com/

我已经设法让它的一半工作(从顶部向下滑动)，但只有当标题的初始顶部位置为 0px 时。参见:( http://jsfiddle.net/k2jyS/1/ ) - 然而，它也没有滑回 - 只是突然消失了。

这是我标记的基本轮廓

<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>

CSS

header {
    position: absolute;
    width: 100%;
    top: 40px;
    left: 0px;
    right: 0px;
    background-color: red;
    text-align: center;
    z-index: 100;
    transition: all 0.5s ease;
}
.hero {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.hero img {
    display: block;
    min-width: 100%;
    max-width: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.fixed header {
    left: 0px;
    right: 0px;
    position: fixed;
    background-color: red;
    top: -80px;
    border-bottom: solid 1px #e4e4e4;   
}

到目前为止的 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;      
    }
});

这是示例 fiddle ，我的导航显示在距离顶部 40 像素的位置: http://jsfiddle.net/k2jyS/

(由于顶部有 40 像素，所以从底部开始滑动动画)。

关于如何实现我想要的效果有什么想法吗？谢谢大家!

编辑 - 这是最终的工作 jQuery。我还必须从 header 中删除 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;
  }
}); 

http://jsfiddle.net/k2jyS/3/

Answer 1

我相当确定您最大的问题是您实际上没有在代码中为滚动条设置动画。尽管如此，当我尝试时，我发现出于某种原因，在与滚动动画相同的 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');
  }
});

我发现给动画一个更长的缓动时间可以让它更引人注目，至少对于测试和确保它确实是动画来说是这样。

编辑:我修改后的代码可以工作，但是如果你从你的 header 中删除这一行，你可以大大简化它 CSS: transition: all 0.5s ease ; 因为 Javascript 在执行下一行之前不会等待你的缓动完成，所以在正常情况下可能一个接一个地发生的事情必须在不同的时间被调用另一个，这就是为什么我不得不把它分成这么多单独的 if 语句。如果没有该声明，您的代码可能如下所示:

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');
    });
  }
});

animate() 中的匿名函数是一个complete()，这意味着它在继续之前等待动画完成。当您的 CSS 中仍然有一个 transition 声明时，我无法将该概念应用于您的滚动以折叠 if 语句。