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

【问题标题】：How to hide logo at different scroll point depending on screen width如何根据屏幕宽度在不同的滚动点隐藏徽标
【发布时间】：2019-12-25 02:21:32
【问题描述】：

试图在滚动到 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);
      }
  });
});

【问题讨论】：

标签： javascript jquery scroll width element

【解决方案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);
    }
  });
}

【讨论】：