0

Есть небольшая функция, которая при скролле добавляет\удаляет класс элементу + скрывает\открывает блоки:

$(document).ready(function() {
    var navbar = $('.navbar');
    var head = $('#head');
    var headFix = $('#head-fix');
    var main = $('.main');
  $(window).scroll(function() {
    if ($(this).scrollTop() > 1) {
        navbar.addClass('navbar-fix');
        head.css('display', 'none');
        headFix.css('display', 'block');
        main.css('margin-top', '200px');
    }
    else {
        navbar.removeClass('navbar-fix');
        head.css('display', 'block');
        headFix.css('display', 'none');
        main.css('margin-top', '0');
    }
  });
});

Сейчас она срабатывает постоянно - то есть при каждом движении колёсика мыши проверяет условие if, и если оно верно, выполняет действия. Из-за этого возникает дёргание и рябь: элементы постоянно открываются и скрываются.

Как сделать, чтобы функция отрабатывала только один раз - при переходе scrollTop() через 1 (туда и обратно)?

3 ответа 3

2

Так же можно сделать с использованием Intersection Observer API:

(function($) {
  $(function() {
    var navbar = $('.navbar')
      , head = $('#head')
      , headFix = $('#head-fix')
      , main = $('.main')
      , observeTarget = $('.observeMe').get(0)
      , isTop = null;
    // создаем новый observer
    var observer = new IntersectionObserver(intersection);
    // observer следит за элементом 0x0 в верху страницы
    observer.observe(observeTarget);
    function intersection(entries) {
      //т.к. у нас только один элемент, берем просто 0 элемент от entries
      if (!entries[0].intersectionRatio) {
          //прячем, если пересечение исчезло
          navbar.addClass('navbar-fix');
          head.hide();
          headFix.show();
          main.css('marginTop', 200);      
      } else {
          navbar.removeClass('navbar-fix');
          head.show();
          headFix.hide();
          main.css('marginTop', 0);

      }
    }
  });
})(jQuery);
.content {
  height: 2000px;
}
.observeMe {
  height: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  margin: 0;
  border: none;
  padding: 0;
}
div {
  border: 1px solid;
  margin: 16px;
  padding: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="observeMe"></div>
<div class="content">
  <div class="navbar">Navbar</div>
  <div id="head">Head</div>
  <div id="head-fix">Head Fix</div>
  <div class="main">Main</div>
</div>

по умолчанию не работает нигде, кроме chrome-based >= 51.

для вышеописанного существует полифил, который скорее всего представляет из себя по большей части слежение за позициями скролла.

0

(function($) {
  $(function() {
    var navbar = $('.navbar')
      , head = $('#head')
      , headFix = $('#head-fix')
      , main = $('.main')
      , isTop = null;
    $(window).scroll(function() {
      var newIsTop = $(this).scrollTop() > 1 ? false : true;
      if (isTop !== newIsTop) {
        isTop = newIsTop;
        if (!isTop) {
          navbar.addClass('navbar-fix');
          head.hide();
          headFix.show();
          main.css('marginTop', 200);
        }
        else {
          navbar.removeClass('navbar-fix');
          head.show();
          headFix.hide();
          main.css('marginTop', 0);
        }
      }
    }).scroll();
  });
})(jQuery);
.content {
  height: 2000px;
}

div {
  border: 1px solid;
  margin: 16px;
  padding: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="navbar">Navbar</div>
  <div id="head">Head</div>
  <div id="head-fix">Head Fix</div>
  <div class="main">Main</div>
</div>

3
  • Не помогло. Нужно прекратить выполнение функции $(window).scroll(function() если if отработал. В Вашем примере всё равно при любом движении колёсика мыши функция вызывается снова и снова, происходит постоянная проверка условия и выполняются действия. 23 апр 2017 в 12:56
  • @humster_spb, в вашем коде действия выполняются каждый раз при прокрутке вне зависимости от состояния. В коде ответа действия выполняются по одному разу при переходе через границу scrollTop() > 1, то есть, если scrollTop был 0, а стал 10, то действия выполнятся 1 раз, но потом если scrollTop станет 20 - действия уже не выполнятся, а выполнятся только если scrollTop станет 0. 23 апр 2017 в 13:17
  • для гурманов, developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
    – zb'
    23 апр 2017 в 13:41
0

Можно попробовать вот так, условия будут проверяться, но срабатывать перерисовка будет только когда условие выполнится, дёрганья и ряби не наблюдал:

$(document).ready(function() {
  var navbar = $('.navbar'),
    head = $('#head'),
    headFix = $('#head-fix'),
    main = $('.main');

  function funcRemove(e) {
    if (document.body.scrollTop > 10) {
      //console.log('funcRemove');
      navbar.addClass('navbar-fix');
      head.hide();
      headFix.show();
      main.css('marginTop', 150);
      window.removeEventListener('scroll', funcRemove);
      window.addEventListener('scroll', funcAdd);
    }
  }

  function funcAdd() {
    if (document.body.scrollTop < 10) {
      //console.log('funcAdd');
      navbar.removeClass('navbar-fix');
      head.show();
      headFix.hide();
      main.css('marginTop', 0);
      window.removeEventListener('scroll', funcAdd);
      window.addEventListener('scroll', funcRemove);
    }
  }

  window.addEventListener('scroll', funcRemove);
});
.content {
  height: 1000px;
}

div {
  border: 1px solid;
  margin: 16px;
  padding: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
  <div class="navbar">Navbar</div>
  <div id="head">Head</div>
  <div id="head-fix">Head Fix</div>
  <div class="main">Main</div>
</div>

2
  • @zb', ну, чтобы добавить снова функцию - нужно выполнить window.addEventListener('scroll', myFunction); :) Или я вопрос не так понял, вроде бы вопрос в том, как сделать так, чтобы отработало всего один раз :) 23 апр 2017 в 14:34
  • @zb', то есть вопрос в том, чтобы функция сработала не один раз, а сработала когда скролл вверху или внизу? :) попробую внести правку 23 апр 2017 в 14:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.