Javascript 淡出功能移动问题

我正在使用jQuery的函数隐藏我的标题

它工作正常，但在移动设备上有问题。
问题是：淡出并没有缓慢地隐藏元素，该函数将整个页面移动20-30像素

这就是功能：

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

有没有办法解决这个问题

---

谢谢

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

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

---

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

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

---

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

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

---

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

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

---

我认为值

50

应该是一个变量。换言之，尝试使用

50

以外的值并用mobile进行测试。我认为

50

值应该是一个变量。换言之，尝试使用

50以外的值，并用mobile进行测试。这不是固定的issue@Haris. 很公平。但是，仍然可以应用滚动事件超时。您在回答媒体查询时所做的与问题中所做的相同，但前提是窗口宽度小于
64em
。如果将浏览器窗口缩小到该宽度以下，则不会产生任何效果。问题只出现在移动设备上。其他设备工作正常。因此，我使用媒体查询来启用淡出功能，仅适用于1024px及更高版本的设备。现在可以了，这不是固定的issue@Haris. 很公平。但是，仍然可以应用滚动事件超时。您在回答媒体查询时所做的与问题中所做的相同，但前提是窗口宽度小于
64em
。如果将浏览器窗口缩小到该宽度以下，则不会产生任何效果。问题只出现在移动设备上。其他设备工作正常。因此，我使用媒体查询来启用淡出功能，仅适用于1024px及更高版本的设备。现在起作用了。