如何根据屏幕宽度在不同的滚动点隐藏徽标

Question

当徽标滚动到72像素时，它会试图隐藏在粘性导航上，但在较小的屏幕上，则需要隐藏到150像素。

我试图将其隐藏在72像素处，但在较小的屏幕上，它开始闪烁，因为隐藏的元素会导致滚动点发生变化，因此它再次显示，进入循环。

jQuery(document).ready(function() {
  if ($(window).width() <= 992){    
    jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop() > 150) {
        jQuery('.fl-page-header-logo').fadeOut(500);
      } else {
        jQuery('.fl-page-header-logo').fadeIn(500);
      }
  } else {
    jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop() > 72) {
        jQuery('.fl-page-header-logo').fadeOut(500);
      } else {
        jQuery('.fl-page-header-logo').fadeIn(500);
      }
  });
});

Answer 1

您不能关闭jquery滚动函数。(缺少})；

jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop() > 150) {
        jQuery('.fl-page-header-logo').fadeOut(500);
      } else {
        jQuery('.fl-page-header-logo').fadeIn(500);
      }
});

不知道为什么否则就不行了。不管怎样，试试这个。它对我有用，而且更干净：

var windowsWidth = $(window).width();

if (windowsWidth <= 992){ 
    fadeOutLogo(72);
} else {
    fadeOutLogo(150);
}

function fadeOutLogo(offset){
  jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
      jQuery('.fl-page-header-logo').fadeOut(500);
    } else {
      jQuery('.fl-page-header-logo').fadeIn(500);
    }
  });
}