PatternLab (1.0.31)

Appearance

toggleStickyClass() ​

Adds a sticky class to an element when it reaches a certain position in the viewport.

  • element: The DOM element to which the sticky class will be added.
  • className: The class name to be added when the element becomes sticky: default is -is-sticky.
  • offset: The vertical offset in pixels from the top of the viewport at which the class will be added.
javascript
Util.toggleStickyClass(element, className, offset);

Usage ​

javascript
Util.toggleStickyClass(document.querySelector('.header'), '-is-sticky', 100);

Examples ​

Sticky Search Toolbar ​

Scroll down to see the sticky functionality in action.

  • the class .-enlarge-input-on-active enlarges the input field when it is focused (.c-float-container has .-is-active class)
Treffer:0
Show Code
html
<div style="height: 1000px;">
  <div class="h-highlight-block p-b-s js-search-container">
    <div class="js-search-toolbar m-b-l h-flex h-flex-row h-top gap-l top-0 right-0 h-bg-glass p-x-m h-self-end h-bg-glass p-y-s p-x-s h-min-w-50 h-border-white h-no-border-top h-always-on-top h-border-radius-extra-large h-border-radius-reset-top h-box-shadow">
      <div class="h-width-100">
        <div class="c-float-container -has-input -light -has-btn -has-icon m-b-reset -enlarge-input-on-active">
          <button type="button" class="c-float-container__icon -clear js-search-clear" aria-controls="search-input">
            <span class="far fa-times" aria-hidden="true"></span>
            <span class="h-sr-only">Suche zurücksetzen</span>
          </button>
          <label class="c-label" for="search_input">Taxikon durchsuchen ...</label>
          <input type="search" id="search_input" name="search" class="js-search-input js-search c-input -icon" data-placeholder="Suchen..." />
          <button type="submit" class="c-btn -square-btn -primary -input">
            <span class="fa fa-search" aria-hidden="true"></span>
            <span class="h-sr-only">Taxikon durchsuchen</span>
          </button>
        </div>
        <span class="c-float-container__hint js-search-hint" aria-hidden="true">
                  Es wurden keine Treffer gefunden. Bitte probieren Sie es mit anderen Suchbegriffen.
              </span>
      </div>
      <div class="h-type-align-center p-t-xs" role="status" aria-label="Anzahl der Suchergebnisse">
        <span class="h-block h-type-bold h-type-small">Treffer:</span>
        <span class="js-search-counter h-type-large h-type-bold" aria-live="polite">0</span>
      </div>
      <div class="h-flex h-flex-row gap-xs p-t-xs">
        <button class="c-btn -icon-btn -small -light js-search-prev" disabled>
          <i class="fas fa-arrow-up" aria-hidden="true"></i>
          <span class="h-sr-only">Vorheriger Treffer</span>
        </button>
        <button class="c-btn -icon-btn -small -light js-search-next" disabled>
          <i class="fas fa-arrow-down" aria-hidden="true"></i>
          <span class="h-sr-only">Nächster Treffer</span>
        </button>
      </div>
    </div>
  </div>
</div>

2026 - Pharma4u