FadeOut函数移动问题

Question

我使用jQuery的函数来隐藏我的头。

它可以像我喜欢的那样工作，但它在移动设备上有一个问题。

问题是: fadeOut没有缓慢地隐藏元素，而且函数正在移动整个页面20-30像素。

这是一项功能：

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

有什么办法解决吗？

谢谢!

Answer 1

这就是解决办法。我只是把媒体查询放在脚本中

// 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();
    }
    });
  }
};

Answer 2

您正在设置渐变转换与每一个滚动变化，即很多次每秒，而你正在滚动。只有在停止滚动后才允许淡出转换：

$(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);
});