Question

我正在尝试创建一个绝对位于页面顶部的菜单，然后一旦窗口滚动到某个点以下，菜单就跳到顶部的固定位置，然后使用jQuery创建一个向下滑动影响。如果窗口向上滚动到此点以上，则菜单应向上滑动，然后返回到页面顶部的原始位置。

不幸的是，我可以让幻灯片向下工作，但不是向上滑动，它只是消失而且不会回到顶部。我知道这是由slideDown（）函数设置内联样式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;，因此slideDown函数可以工作。有什么想法吗？

Answer 1

您需要等到slideUp完成。

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

使菜单向上和向下滑动

1 个答案: