使菜单上下滑动

Question

我正在尝试制作一个菜单，从页面顶部的绝对位置开始，然后一旦窗口滚动到某个点以下，菜单跳到顶部的固定位置，然后使用jQuery创建幻灯片下降效果。如果窗口在此点上方滚动，则菜单应向上滑动，然后返回到页面顶部的原始位置。

不幸的是，我可以让幻灯片下来工作，但没有幻灯片向上，它只是消失了，没有回到顶部。我知道这是由于slideDown()函数设置了display: none;的内联样式，但既没有将其重置为使用css阻止!important，也没有重新设置jQuery work。这是我工作过的一支钢笔。有什么办法解决这个问题吗？

我的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;，这样slideDown函数就可以工作了。有什么想法吗？

Answer 1

您需要等待直到slideUp完成。

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