Проблема с $(window).scroll(function ()

282

08 января 2022, 00:20

Есть скрипт на сайте:

var header = $('.header__hamburger'),
        scrollPrev = 0;
$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if ( scrolled > 100 && scrolled > scrollPrev+200 ) {
        $('.header__hamburger').fadeOut();
    } else {
        $('.header__hamburger').fadeIn();
    }
    scrollPrev = scrolled;
});

Он скрывает или показывает гамбургер при прокрутке. И на десктопе все норм а на телефоне гамбургер моргает при скрытии. Такое ощущение что $('.header__hamburger').fadeOut() вызывается много раз. Подскажите пожалуйста куда копать.

Answer 1

Хм, у меня ваш код не работает даже на ПК, у вас в if какое-то совершенно не понятное условие, также в данном коде не понятно зачем вообще у вас есть scrollPrev.

Могу предложить такой вариант

var header = $('.header__hamburger');
let trig = false;
$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if ( scrolled > 100) {
        if(!trig){
            $('.header__hamburger').fadeOut();
            trig = true;
        }
    } else {
        $('.header__hamburger').fadeIn();
        trig = false;
    }
});

Здесь еще добавлена проверка на срабатывание условия при скролле > 100. В таком варианте .fadeOut будет вызываться единожды

Answer 2

Если необходимо скрывать при скролле вниз и показывать при скролле вверх можете использовать этот код

jQuery(document).ready(function($) { 
  var mainHeader = $('.cd-auto-hide-header'), 
    secondaryNavigation = $('.cd-secondary-nav'), 
    //this applies only if secondary nav is below intro section 
    belowNavHeroContent = $('.sub-nav-hero'), 
    headerHeight = mainHeader.height(); 
 
  //set scrolling variables 
  var scrolling = false, 
    previousTop = 0, 
    currentTop = 0, 
    scrollDelta = 5, 
    scrollOffset = 150; // Указыватеся на сколько должна быть проскроленна страница перед скрытием header 
 
  mainHeader.on('click', '.nav-trigger', function(event) { 
    // open primary navigation on mobile 
    event.preventDefault(); 
    mainHeader.toggleClass('nav-open'); 
  }); 
 
  $(window).on('scroll', function() { 
    if (!scrolling) { 
      scrolling = true; 
      (!window.requestAnimationFrame) ? 
      setTimeout(autoHideHeader, 250): requestAnimationFrame(autoHideHeader); 
    } 
  }); 
 
  $(window).on('resize', function() { 
    headerHeight = mainHeader.height(); 
  }); 
 
  function autoHideHeader() { 
    var currentTop = $(window).scrollTop(); 
 
    (belowNavHeroContent.length > 0) ? 
    checkStickyNavigation(currentTop) // secondary navigation below intro 
      : checkSimpleNavigation(currentTop); 
 
    previousTop = currentTop; 
    scrolling = false; 
  } 
 
  function checkSimpleNavigation(currentTop) { 
    //there's no secondary nav or secondary nav is below primary nav 
    if (previousTop - currentTop > scrollDelta) { 
      //if scrolling up... 
      mainHeader.removeClass('is-hidden'); 
    } else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) { 
      //if scrolling down... 
      if (mainHeader.hasClass('onHover')) { 
        console.log('test') 
      } else { 
        mainHeader.addClass('is-hidden'); 
      } 
 
    } 
  } 
 
  function checkStickyNavigation(currentTop) { 
    //secondary nav below intro section - sticky secondary nav 
    var secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height(); 
 
    if (previousTop >= currentTop) { 
      //if scrolling up...  
      if (currentTop < secondaryNavOffsetTop) { 
        //secondary nav is not fixed 
        mainHeader.removeClass('is-hidden'); 
        secondaryNavigation.removeClass('fixed slide-up'); 
        belowNavHeroContent.removeClass('secondary-nav-fixed'); 
      } else if (previousTop - currentTop > scrollDelta) { 
        //secondary nav is fixed 
        mainHeader.removeClass('is-hidden'); 
        secondaryNavigation.removeClass('slide-up').addClass('fixed'); 
        belowNavHeroContent.addClass('secondary-nav-fixed'); 
      } 
 
    } else { 
      //if scrolling down...	 
      if (currentTop > secondaryNavOffsetTop + scrollOffset) { 
        //hide primary nav 
        mainHeader.addClass('is-hidden'); 
        secondaryNavigation.addClass('fixed slide-up'); 
        belowNavHeroContent.addClass('secondary-nav-fixed'); 
      } else if (currentTop > secondaryNavOffsetTop) { 
        //once the secondary nav is fixed, do not hide primary nav if you haven't scrolled more than scrollOffset  
        mainHeader.removeClass('is-hidden'); 
        secondaryNavigation.addClass('fixed').removeClass('slide-up'); 
        belowNavHeroContent.addClass('secondary-nav-fixed'); 
      } 
 
    } 
  } 
});

.header { 
  position: fixed; 
  height: 80px; 
  background: #000; 
  z-index: 101; 
  width: 100%; 
  left: 0; 
  top: 0; 
  -webkit-transition: all 0.5s; 
  -o-transition: all 0.5s; 
  transition: all 0.5s; 
} 
 
.header.is-hidden { 
  -webkit-transform: translateY(-100%); 
  -ms-transform: translateY(-100%); 
  transform: translateY(-100%); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<header class="header cd-auto-hide-header"></header> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблема с $(window).scroll(function ()

Блокировка Async/Await

Как соединить enum и тип double

Привязка DataGridViewComboBoxColumn к таблице БД

Goto на одну строку C#