FadeOut 功能移动问题

Question

我正在使用 jQuery 的功能来隐藏我的 header。

它运行正常，但在移动设备上有问题。
问题是：fadeOut 不会慢慢隐藏元素，函数会将整个页面移动 20-30 像素。

这是函数：

$(window).scroll(function() {
  if ($(this).scrollTop()>50) {
    $('.c-header').fadeOut();
  } else {
    $('.c-header').fadeIn();
  }
});

有什么解决办法吗？

谢谢！

Answer 1

您正在为每次滚动更改设置淡入淡出过渡，即在滚动时每秒多次。仅在停止滚动后才允许淡入淡出过渡：

$(window).scroll(function () {
  var me = $(this);
  var header = $('.c-header');
  var height = 50; // Might as well be header.outerHeight()
  clearTimeout(window.headerScrollTimeoutId||0);
  window.headerScrollTimeoutId = setTimeout(function () {
    if (me.scrollTop() > height) {
      header.fadeOut();
    } else {
      header.fadeIn();
    }
  }, 1);
});

Answer 2

这是修复。我只是把媒体查询放在脚本中

// media query event handler
if (matchMedia) {
  var mq = window.matchMedia("(min-width: 64em)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change     window width is at least 64em
function WidthChange(mq) {
  if (mq.matches) {
     $(window).scroll(function() {
    if ($(this).scrollTop()>50)     {
        $('.c-header').fadeOut();
     }   else     {
        $('.c-header').fadeIn();
    }
    });
  }
};

FadeOut 功能移动问题

FadeOut function mobile issue

javascript

jquery

fadeout