Question

我使用jQuery的功能来隐藏我的标题。

它按我喜欢的方式工作，但它在移动设备上存在问题问题是：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功能移动问题

2 个答案: