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

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() {&nbsp; &nbsp; &nbsp; if (jQuery(this).scrollTop() > 150) {&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.fl-page-header-logo').fadeOut(500);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.fl-page-header-logo').fadeIn(500);&nbsp; &nbsp; &nbsp; }});无法真正说出为什么它不会起作用。不管怎样，试试这个。它对我有用，而且更干净：var windowsWidth = $(window).width();if (windowsWidth <= 992){&nbsp;&nbsp; &nbsp; fadeOutLogo(72);} else {&nbsp; &nbsp; fadeOutLogo(150);}function fadeOutLogo(offset){&nbsp; jQuery(window).scroll(function() {&nbsp; &nbsp; if (jQuery(this).scrollTop() > offset) {&nbsp; &nbsp; &nbsp; jQuery('.fl-page-header-logo').fadeOut(500);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; jQuery('.fl-page-header-logo').fadeIn(500);&nbsp; &nbsp; }&nbsp; });}