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

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

    }

  });

}