粘性页眉从顶部滑入固定位置

Question

我已经设置了粘性标头以弹出到顶部固定位置，但是我希望它具有动画效果，以便在滚动时从屏幕外的顶部向下滑动到当前的顶部0位置。

我尝试添加过渡CSS，但由于“正常”标头不在同一位置，因此它似乎滑入了位置。 它的顶部增加了边距，因此我想这就是动画显示其向上滑动到顶部0位置的原因。

$(window).scroll(function () {
    if( $(window).scrollTop() > $('.header').offset().top + 300 && !($('.header').hasClass('stickyheader'))){
    $('.header').addClass('stickyheader');
    } else if ($(window).scrollTop() == 0){
    $('.header').removeClass('stickyheader');
    }
});

http://jsfiddle.net/jc0807/euyLvesr/4/

谢谢

Answer 1

只是用jQuery动画化过渡：

JS：

$(window).scroll(function () {
  if( $(window).scrollTop() > $('.header').offset().top + 300 && !($('.header').hasClass('stickyheader'))){
    $('.header').addClass('stickyheader').animate({"top":"0%"});
  } else if ($(window).scrollTop() == 0){
    $('.header').removeClass('stickyheader');
  }
});

CS：

.stickyheader{
   ...
   top: -100%;
   ...
}

JSFIDDLE

增加的幻灯片时间：

更新场

固定向上滚动后向下滑动

新产品