Добавлен баннер в верхней части сайта, но теперь необходимо настроить «смещение» для липкой навигации - обновлено с полным кодом - PullRequest
Новая
       15

Добавлен баннер в верхней части сайта, но теперь необходимо настроить «смещение» для липкой навигации - обновлено с полным кодом

0 голосов
/ 13 июня 2019

Edit # 1 Я добавил больше кода, который я нашел для больного меню в другом файле js.

Я добавил верхний баннер , который имеет высоту 100px, на мой сайт - я разместил баннер над навигацией (которая становится липкой навигацией)

Вот скриншот этого: (пока нет прокрутки) enter image description here

При добавлении этого баннера возникла проблема со смещением из-за плохой навигации. Вызывает нежелательное «белое пространство» размером около 100 пикселей (такого же размера, как мой новый верхний баннер)

Вот скриншот этого: (когда начинается прокрутка или когда вы возвращаетесь в начало сайта) enter image description here

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

Как мне изменить его, чтобы учесть дополнительные 100px? 

// Supermarket
        if ($quickSearchDiv.offset().top < window.scrollY) {
            $quickSearchDiv.css('top', `${window.scrollY + $('[data-stickymenu]').height()}px`);
        }

И 

 const $stickyMenus = $('[data-stickymenu]');
    if ($stickyMenus.length > 0) {
        $stickyMenus.each((i, el) => {
            $(el).data('papathemesOriginalTop', $(el).offset().top)
                .after('<div class="papathemes-stickymenu-placeholder"></div>')
                .next().height($(el).outerHeight());
        });

        $(window)
            .on('scroll', _.debounce(() => {
                if (!mq || !mq.matches) {
                    $stickyMenus.removeClass('is-sticky');
                    return;
                }

                $stickyMenus.each((i, el) => {
                    if ($(window).scrollTop() > $(el).data('papathemesOriginalTop')) {
                        $(el).addClass('is-sticky');
                    } else {
                        $(el).removeClass('is-sticky');
                    }
                });
            }, 10))

            .on('resize', _.debounce(() => {
                $stickyMenus.each((i, el) => {
                    $(el).removeClass('is-sticky');

                    $(el).data('papathemesOriginalTop', $(el).offset().top);
                });
            }, 100));
    }

и 

 // ------------------------------------------------------------------------
  // Sticky header
  // ------------------------------------------------------------------------


  var $stickyMenus = jquery__WEBPACK_IMPORTED_MODULE_4___default()('[data-stickymenu]');

  if ($stickyMenus.length > 0) {
    $stickyMenus.each(function (i, el) {
      jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).data('papathemesOriginalTop', jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).offset().top).after('<div class="papathemes-stickymenu-placeholder"></div>').next().height(jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).outerHeight());
    });
    jquery__WEBPACK_IMPORTED_MODULE_4___default()(window).on('scroll', lodash_debounce__WEBPACK_IMPORTED_MODULE_3___default()(function () {
      if (!mq || !mq.matches) {
        $stickyMenus.removeClass('is-sticky');
        return;
      }

      $stickyMenus.each(function (i, el) {
        if (jquery__WEBPACK_IMPORTED_MODULE_4___default()(window).scrollTop() > jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).data('papathemesOriginalTop')) {
          jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).addClass('is-sticky');
        } else {
          jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).removeClass('is-sticky');
        }
      });
    }, 10)).on('resize', lodash_debounce__WEBPACK_IMPORTED_MODULE_3___default()(function () {
      $stickyMenus.each(function (i, el) {
        jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).removeClass('is-sticky');
        jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).data('papathemesOriginalTop', jquery__WEBPACK_IMPORTED_MODULE_4___default()(el).offset().top);
      });
    }, 100));
  }

Спасибо за любую помощь!

...