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

这是一个示例小提琴，我的导航从顶部出现40px： http://jsfiddle.net/k2jyS/

（由于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;
  }
});

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并非等待在执行下一行之前你的缓和完成，所以在正常情况下可能一个接一个地发生的事情必须在不同的时间彼此调用，这就是为什么我不得不把它分成这么多单独的如果声明。如果没有该声明，您的代码可能如下所示：

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()，这意味着它在继续之前等待动画完成。当您在transition中仍有CSS声明时，我无法将该概念应用于您的滚动以折叠if语句。

jQuery动画滑动顶部固定导航

1 个答案: