HeadroomJS - функция запускается дважды в опциях - PullRequest
0 голосов
/ 23 января 2019

Я использую HeadroomJS (https://wicky.nillia.ms/headroom.js/), чтобы определить, когда положение прокрутки вверху или нет сверху.

В параметрах "onTop" и "onNotTop", я объявил .on('click event.

Когда пользователь не находится вверху страницы, и нажата menuTrigger, оба $(menuTrigger).on('click touchstart', function (e) { события продолжаются.

Как видно из кода, console.log('b2'); объявляется один раз в каждом параметре headroomjs, но в моей консоли он отображается дважды, что означает, что обе функции триггера меню работают.

enter image description here

// Construct headroom instance
  headroom  = new Headroom(primaryHeader, {
    "onTop" : function() {
      // Dynamically update the src="" of the brand-image using the data attributes of dark/light logo url's. Depending on the boolean value returned from the helper function. Checks if the 'primary-logo-color' attribute is "dark" or "light". Triggers only when scrolled to top.
      if ( primary_header_007_logo_color( primaryLogoColor ) ){
        $('.primary-header__brand-image').attr("src", lightLogoSrc);
        console.log('a1');
      } else {
        $('.primary-header__brand-image').attr("src", darkLogoSrc);
        console.log('a2');
      }

      $(menuTrigger).on('click touchstart', function (e) {
        if ($(checkMenu).is(".primary-header.is-expanded")) {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('b1');
          } else {
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('b2');
          }

        } else {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('c1');
          } else {
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('c2');
          }

        }

        // Prevent touch events from triggering click events and this process looping
        e.preventDefault();
      });
    },

    // Dynamically update the src="" of the brand-image using the data attributes of dark/light logo url's. Depending on the boolean value returned from the helper function. Checks if the 'primary-logo-color' attribute is "dark" or "light". Triggers only when not scrolled to top.
    "onNotTop" : function() {
      if ( primary_header_007_logo_color( primaryLogoColor ) ){
        $('.primary-header__brand-image').attr("src", darkLogoSrc);
        console.log('a1');
      } else {
        $('.primary-header__brand-image').attr("src", lightLogoSrc);
        console.log('a2');
      }

      $(menuTrigger).on('click touchstart', function (e) {
        if ($(checkMenu).is(".primary-header.is-expanded")) {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('b1');
          } else {
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('b2');
          }

        } else {

          if ( primary_header_007_logo_color( primaryLogoColor ) ){
            $('.primary-header__brand-image').attr("src", darkLogoSrc);
            console.log('c1');
          } else {
            $('.primary-header__brand-image').attr("src", lightLogoSrc);
            console.log('c2');
          }

        }

        // Prevent touch events from triggering click events and this process looping
        e.preventDefault();
      });

    },
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...