滚动时，模板条从其位置分离太早

Question

在我的网站中，滚动顶部时，模板栏分离得太早了，因此看起来不合适。我需要在向下滚动滚动条到达站点顶部时将其断开。请帮助朋友。

此外，日期选择器也不应覆盖它。标头广告低于90px时，可以看到模板条的正确行为

stencil bar after scrolling stencil bar normal position

<Appenders>
        <RollingFile name="LogFile" filename="${log-path}/${log-file-name}" append="true" filePattern="${log-path}/${log-file-name}.%i">
            <PatternLayout pattern="%d %t %-5p %-32c{1} - %m%n"/>
            <ThresholdFilter level="INFO" onMatch="ACCEPT" onMismatch="DENY"/>
            <Policies>
                <SizeBasedTriggeringPolicy size="25 MB"/>
            </Policies>
            <DefaultRolloverStrategy max="1000"/>
</Appenders>

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;
    }
  }
}

屏幕截图

屏幕截图已随附。