使菜单上下滑动

Make Menu Slide Up and Down

本文关键字：上下 菜单      更新时间：2023-09-26

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

不幸的是，我可以让幻灯片向下工作，但不能向上滑动，它只是消失并且不会回到顶部。我知道这是由 slideDown（） 函数设置内联样式display: none;引起的，但既没有将其重置为使用 css 进行!important也未使用 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 函数可以工作。有什么想法吗？

您需要

等到slideUp完成。

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