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

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

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

How to hide logo at different scroll point depending on screen width

javascript

jquery

scroll

element

width