Во время прокрутки трафаретная штанга отсоединяется слишком рано

Question

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

Кроме того, оно не должно охватываться средством выбора даты. Правильное поведение трафаретной полосы можно увидеть, когда заголовок объявления меньше 90px

трафарет после прокрутки нормальная позиция трафарета

import {
  throttle,
  onRAF,
  pubsubNamespace,
} from 'components/vendor/perform/utils';
import { breakpoint } from 'components/vendor/perform/responsive';
import pubsub from 'pubsub.js';
import moment from 'moment';

import 'widgets/stencilbar/style.scss';

require('widgets/switch');

/**
 * Stencilbar widget module
 * @param {Object} context - context object
 */
export default function (context) {
  const $context = $(context);
  const classWidget = 'widget-stencilbar';
  const classIconsBar = `${classWidget}__icons`;
  const classIcon = `${classWidget}__icon`;
  const selectorIcon = `.${classIcon}`;
  const selectorIconsBar = `.${classIconsBar}`;
  const classIconDisabled = `${classIcon}--disabled`;
  const classIconsBarSticky = `${classIconsBar}--sticky`;
  const classSwitch = 'widget-switch';
  const selectorSwitch = `.${classSwitch}`;
  const switchContext = $context.find(selectorSwitch).get(0);
  const switchEventNamespace = pubsubNamespace(switchContext);
  const $liveNow = $context.find(`${selectorIcon}--live-now`).eq(0);
  const $liveNowCheckbox = $liveNow.find('input').eq(0);
  const $iddaa = $context.find(`${selectorIcon}--iddaa`).eq(0);
  const $iddaaCheckbox = $iddaa.find('input').eq(0);
  const eventNamespace = pubsubNamespace(context);
  const $document = $(document);
  const $window = $(window);
  const $iconsBar = $context.find(selectorIconsBar);
  const stencilbarOffsetTop = $iconsBar.offset().top;
  const isMobile = !$('html').hasClass('dev-desktop');
  const today = moment();
  let headerOpened = true;
  let headerHeight;
  let lastStencilbarWidth;
  let isLiveNowEnabled = true;
  

  /**
   * Watches when scrolling if stencilbar should be sticky
   */
  function watchSticky() {
    onRAF(() => {
      $iconsBar.toggleClass(classIconsBarSticky, shouldStencilbarBeSticky());
    });
  }

  /**
   * Watches stencilbar width when sticky and breakpoints changes
   */
  function watchStencilbarWidth() {
    onRAF(() => {
      let currentStencilbarWidth = '100%';

      if (breakpoint('from', '580')) {
        currentStencilbarWidth = $context.width();
      }

      if (currentStencilbarWidth !== lastStencilbarWidth) {
        $iconsBar.css('width', currentStencilbarWidth);
        lastStencilbarWidth = currentStencilbarWidth;
      }
    });
  }

  /**
   * Should stencilbar be sticky
   * @returns {bool} - true if stencilbar should be sticky, false otherwise
   */
  function shouldStencilbarBeSticky() {
    const headerOffsetBottom = headerOpened ? headerHeight : 0;
    
    return ($document.scrollTop() + headerOffsetBottom) > stencilbarOffsetTop;
  }

  /**
   * Publish information when switch's state changes
   * @param {HTMLElement} eventContext - switch widget context
   * @param {boolean} value - alt/default flag
   */
  function onSwitchChange(eventContext, value) {
    if (eventContext !== switchContext) {
      return;
    }

    const orderBy = (value === false) ? 'comp' : 'time';
    pubsub.publish(`${eventNamespace}/order-change`, [orderBy]);
  }

  /**
   * Publish information when liveNow filter state changes
   */
  function onLiveNowOnOff() {
    pubsub.publish(`${eventNamespace}/live-now-on-off`, [
      $liveNowCheckbox.prop('checked'),
    ]);
  }

  /**
   * Publish information when onlyIddaa filter state changes
   */
  function onIddaaOnOff() {
    pubsub.publish(`${eventNamespace}/iddaa-on-off`, [
      $iddaaCheckbox.prop('checked'),
    ]);
  }

  /**
   * Set default switch's state on page load
   * @param {string} orderBy - default order od livescores
   */
  function setSwitchOnLoad(orderBy) {
    pubsub.publish(`${switchEventNamespace}/set-value`, [switchContext, orderBy !== 'comp']);
  }

  /**
   * Set default liveNow state on page load
   * @param {string} checked - default order od livescores
   */
  function setLiveNowOnLoad(checked) {
    $liveNowCheckbox.prop('checked', checked);
  }

  /**
   * Set default iddaa state on page load
   * @param {string} checked - default order of livescores
   */
  function setIddaaNowOnLoad(checked) {
    $iddaaCheckbox.prop('checked', checked);
  }

  pubsub.subscribe(`${eventNamespace}/set-defaults`,
    (sports, order, onlyLive, onlyIddaa) => {
      setSwitchOnLoad(order);
      setLiveNowOnLoad(onlyLive);
      setIddaaNowOnLoad(onlyIddaa);
    }
  );

  pubsub.subscribe(`${eventNamespace}/header-opened`,
    (eventContext, data) => {
      headerHeight = data.headerHeight;
      headerOpened = true;
    }
  );

  pubsub.subscribe(`${eventNamespace}/header-closed`,
    () => {
      headerOpened = false;
    }
  );

  pubsub.subscribe(`${eventNamespace}/date-change`,
    (eventContext, data) => {
      if (eventContext !== context) {
        return;
      }

      isLiveNowEnabled = today.isSame(data.date, 'day');
      $liveNowCheckbox.prop('disabled', !isLiveNowEnabled);

      pubsub.publish(`${eventNamespace}/live-now-on-off`, [
        isLiveNowEnabled && $liveNowCheckbox.prop('checked'),
      ]);

      $liveNow.toggleClass(classIconDisabled, !isLiveNowEnabled);
    }
  );

  pubsub.subscribe(`${eventNamespace}/matches-reloaded`,
    (eventContext, data) => {
      if (eventContext !== context) {
        return;
      }

      $iddaaCheckbox.prop('disabled', !data.iddaaMatchesAmount);
      $iddaa.toggleClass(classIconDisabled, !data.iddaaMatchesAmount);
    }
  );

  pubsub.subscribe(`${switchEventNamespace}/change`, onSwitchChange);
  $liveNowCheckbox.on('change', onLiveNowOnOff);
  $iddaaCheckbox.on('change', onIddaaOnOff);
  $window.on('scroll', isMobile ? throttle(watchSticky, 250) : watchSticky);
  $window.on(
    'breakpointchange',
    isMobile ? throttle(watchStencilbarWidth, 250) : watchStencilbarWidth
  );
  watchSticky();
  watchStencilbarWidth();

  $window.bind('pageshow', event => {
    if (event.originalEvent.persisted) {
      window.location.reload();
    }
  });
  
}

@import "vendor/perform/functions/units";
@import "vendor/perform/mixins/utils";
@import "vendor/perform/mixins/responsive";
@import "global/colors";
@import "mixins/base";

$widget-stencilbar-livescore-bg-color: $color-tertiary-background;
$widget-stencilbar-livescore-switch-text: $color-tertiary-font;
$widget-stencilbar-livescore-icons-container-shadow-color: rgba(0, 0, 0, 0.2);
$widget-stencilbar-livescore-icon-state-on-color: $color-tertiary;
$widget-stencilbar-livescore-icon-state-off-color: $color-primary-font;
$widget-stencilbar-livescore-icon-state-color-disabled: rgba($color-primary-font, .7);

.widget-stencilbar-livescore {
  width: 100%;
  height: rem-calc(88px);

  &::after {
    content: "";
    display: table;
    clear: both;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  &__title {
    @include headline-primary;

    width: 50%;
    flex: 1 1 50%;
  }

  .widget-switch {
    width: 50%;
    flex: 1 1 50%;
  }

  &__icons {
    $base-icons: &;
    float: left;
    width: 100%;
    box-shadow: 0 3px 5px $widget-stencilbar-livescore-icons-container-shadow-color;
    z-index: 2;

    &--sticky {
      position: fixed;
      left: 0;
      top: 0;
      transition: transform 250ms ease-in-out;

      @include from(580) {
        left: auto;
      }
    }

    @at-root .header-opened #{$base-icons}--sticky { // sass-lint:disable-line space-around-operator
      transform: translate3d(0, rem-calc(62px), 0);

      @include from(980) {
        transform: translate3d(0, rem-calc(80px), 0);
      }
    }
  }

  &__icon {
    $base-icon: &;
    display: block;
    width: 25%;
    height: rem-calc(44px);
    padding: rem-calc(9px 0);
    background-color: $widget-stencilbar-livescore-bg-color;
    text-align: center;
    float: left;

    &-label {
      display: block;
      width: 100%;
      height: rem-calc(25px);
      position: relative;
      cursor: pointer;
    }

    &-state {
      font-size: rem-calc(24px);
      color: $widget-stencilbar-livescore-icon-state-off-color;
      transition: color 250ms ease-in-out;
    }

    &-checkbox {
      display: none;

      &:checked ~ #{$base-icon}-state {
        color: $widget-stencilbar-livescore-icon-state-on-color;
      }
    }

    &--favourite &-state {
      display: none;
      @include icon("favourite");
    }

    &--live-now &-state {
      @include icon("live-now");
    }

    &--duello &-state {
      display: none;
      @include icon("duello");
    }

    &--iddaa &-state {
      @include icon("iddaa");
    }

    &--disabled &-state {
      &::before {
        color: $widget-stencilbar-livescore-icon-state-color-disabled;
      }
    }

    &--disabled &-label {
      cursor: not-allowed;
    }

    &--not-clickable {
      pointer-events: none;
    }
  }
}

<div class="widget-stencilbar-livescore"
  data-module="stencilbar/livescore"
>
  <div class="widget-stencilbar-livescore__header">
    <h1 class="widget-stencilbar-livescore__title">
      {{ $headline }}
    </h1>
    @include('widgets.switch.index', [
      'default' => trans('widgets/stencilbar/livescore/index.competitions'),
      'alt' => trans('widgets/stencilbar/livescore/index.kickoff')
    ])
  </div>
  <div class="widget-stencilbar-livescore__icons">
    <div class="widget-stencilbar-livescore__icon
      widget-stencilbar-livescore__icon--live-now"
    >
      <label class="widget-stencilbar-livescore__icon-label">
        <input type="checkbox"
          class="widget-stencilbar-livescore__icon-checkbox"
          autocomplete="off"
          data-ga-label="Canli"
        >
        <span class="widget-stencilbar-livescore__icon-state">
        </span>
      </label>
    </div>
    <div class="widget-stencilbar-livescore__icon
      widget-stencilbar-livescore__icon--iddaa
      widget-stencilbar-livescore__icon--should-be-at-fourth-place"
    >
      <label class="widget-stencilbar-livescore__icon-label">
        <input type="checkbox"
          class="widget-stencilbar-livescore__icon-checkbox"
          autocomplete="off"
          data-ga-label="Iddaa"
        >
        <span class="widget-stencilbar-livescore__icon-state">
        </span>
      </label>
    </div>
    <div class="widget-stencilbar-livescore__icon
      widget-stencilbar-livescore__icon--favourite
      widget-stencilbar-livescore__icon--not-clickable"
    >
      <label class="widget-stencilbar-livescore__icon-label">
        <input type="checkbox"
          class="widget-stencilbar-livescore__icon-checkbox"
          autocomplete="off"
          data-ga-label="Favorites"
        >
        <span class="widget-stencilbar-livescore__icon-state">
        </span>
      </label>
    </div>
    <div class="widget-stencilbar-livescore__icon
      widget-stencilbar-livescore__icon--duello
      widget-stencilbar-livescore__icon--not-clickable"
    >
      <label class="widget-stencilbar-livescore__icon-label">
        <input type="checkbox"
          class="widget-stencilbar-livescore__icon-checkbox"
          autocomplete="off"
          data-ga-label="Duello"
        >
        <span class="widget-stencilbar-livescore__icon-state">
        </span>
      </label>
    </div>
  </div>
</div>

скриншоты

скриншоты прилагаются.