使菜单上下滑动

Question

我试图制作一个从绝对位于页面顶部的菜单开始，然后一旦窗口滚动到某个点以下，菜单就会跳至顶部的固定位置，然后使用jQuery创建向下滑动效果。 如果将窗口向后滚动到该点以上，则菜单应向上滑动，然后返回到页面顶部的原始位置。

不幸的是，我可以放下幻灯片，但不能放上幻灯片，它会消失并且不会回到顶部。 我知道这是由slideDown（）函数设置display: none;的嵌入式样式引起的display: none; 但是既不能将其重置为使用!important css也不能通过jQuery进行阻止。 [这里] [http://codepen.io/SawyerK/pen/HrgDE]是一支笔，我已经在部分工作了。 有想法该怎么解决这个吗？

我的jQuery代码：

$(document).ready(function() {
  var header = $("header");

  $(window).scroll(function() {
    if ($(window).scrollTop() > $(window).height()) {
      header.addClass("fixed").slideDown();
    } else {
      header.slideUp().removeClass("fixed");
    }
  });  
});

而固定类只是设置position: fixed; display: none; position: fixed; display: none; 因此slideDown功能可以正常工作。 有任何想法吗？

Answer 1

您需要等到slideUp完成。

$(window).scroll(function() {
  if ($(window).scrollTop() > $(window).height()) {
    header.addClass("fixed").slideDown();
  } else {
    header.slideUp(400, function() {
      header.removeClass( "fixed" );
    });
  }
});