<div class="c-top-bar">
<div class="c-top-bar__container">
<div class="c-top-bar__row">
<div class="c-top-bar__left">
<div class="c-top-bar__item">
<div class="c-main-menu">
<input type="checkbox" id="mainMenuTrigger" class="c-main-menu__trigger" />
<label for="mainMenuTrigger" class="c-main-menu__label">
<span class="o-css-icon o-css-icon--menu"></span>
Menü
</label>
<div class="c-main-menu__actor">
<div class="c-main-menu__section c-main-menu__section--search">
<div class="c-searchbox c-searchbox--integrated js-searchbox">
<input type="checkbox" id="searchboxIntegratedTrigger" class="c-searchbox__trigger" />
<label for="searchboxIntegratedTrigger" class="c-searchbox__label">
<span class="o-css-icon o-css-icon--search"></span>
Suche
</label>
<div class="c-searchbox__actor">
<div class="c-searchbox__section">
<span class="c-searchbox__section-title">Suche</span>
<form class="o-form o-form--search">
<div class="grid-x grid-margin-x">
<div class="cell large-8 medium-8 small-8">
<div class="o-form__field">
<div class="o-form__fluid">
<input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
</div>
<span class="o-form__status o-form__status--warning">
</span>
<span class="o-form__info" id="input-01"></span>
</div>
</div>
<div class="cell large-4 medium-4 small-4">
<input type="submit" class="o-form__input c-button c-button--full" value="Suchen">
</div>
</div>
<div id="kesearch_filters" class="o-searchfacets">
<div class="grid-x">
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 1</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_author" id="f1_1">
<label class="o-form__label o-form__label--checkbox" for="f1_1">
Autoren</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_nws" id="f1_2">
<label class="o-form__label o-form__label--checkbox" for="f1_2">
News</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_pg" id="f1_3">
<label class="o-form__label o-form__label--checkbox" for="f1_3">
Seiten</label>
</fieldset>
</div>
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 2</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_24h" id="f2_1">
<label class="o-form__label o-form__label--checkbox" for="f2_1">
Letzte 24 Stunden</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_7d" id="f2_2">
<label class="o-form__label o-form__label--checkbox" for="f2_2">
Letzte Woche</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_30d" id="f2_3">
<label class="o-form__label o-form__label--checkbox" for="f2_3">
Letzter Monat</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_old" id="f2_4">
<label class="o-form__label o-form__label--checkbox" for="f2_4">
Älter</label>
</fieldset>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="c-main-menu__section c-main-menu__section--meta">
<div class="c-main-menu__subscription-menu">
<div class="c-subscription-menu c-subscription-menu--integrated">
<input type="checkbox" id="subscriptionMenuIntegratedTrigger" class="c-subscription-menu__trigger" />
<label for="subscriptionMenuIntegratedTrigger" class="c-subscription-menu__label">
<span class="o-css-icon o-css-icon--haz"></span>
Abo
</label>
<div class="c-subscription-menu__actor">
<nav class="c-subscription-menu__section">
<ul class="c-subscription-menu__list c-subscription-menu__list--lvl1">
<li class="c-subscription-menu__item c-subscription-menu__item--lvl1">
<span class="c-subscription-menu__section-title">Abo</span>
<ul class="c-subscription-menu__list c-subscription-menu__list--lvl2">
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo bestellen</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo mit Tablet bestellen</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo verwalten</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Reklamationsservice</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">ABOEXTRA</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Vorteile</a>
</li>
</ul>
</ul>
</nav>
</div>
</div>
</div>
<div class="c-main-menu__login">
<a class="c-login o-link-covert js-customizedUI" href="#" data-href="/assets/json/login.json">
<span class="o-css-icon o-css-icon--user"></span>
Anmelden
</a>
</div>
</div>
<nav class="c-main-menu__section c-main-menu__section-01 c-main-menu__section--offers">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuAngeboteTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuAngeboteTrigger" class="c-main-menu__section-title">Angebote</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">ePaper</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">AboExtra</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">HAZ+</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Kontakt</a>
</li>
</ul>
</ul>
</nav>
<nav class="c-main-menu__section c-main-menu__section-02 c-main-menu__section--departments">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuHildesheimTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuHildesheimTrigger" class="c-main-menu__section-title">Hildesheim</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Aus der Stadt</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Meinung</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fotos</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fotowettbewerb</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Videos</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1 c-main-menu__item--columns-2">
<input type="checkbox" id="mainMenuRegionTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuRegionTrigger" class="c-main-menu__section-title">Region</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2 c-main-menu__list--columns-2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Alfeld</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Algermissen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Bad Salzdetfurth</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Baddeckenstedt</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Bockenem</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Diekholzen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Duingen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Elze</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fredene</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Giesen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Gronau</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Harsum</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Hildesheim</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Hohenhameln</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Holle</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Lamspringe</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Nordstemmen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Sarstedt</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Schellerten</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Sibesse</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Söhlde</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuSportTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuSportTrigger" class="c-main-menu__section-title">Sport</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Eintracht Hildesheim</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Helios Grizzlys</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Hildesheim Invaders</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">VfV 06</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Fußball</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuUnsere autorenTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuUnsere autorenTrigger" class="c-main-menu__section-title">Unsere Autoren</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Übersicht aller Autoren</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Meinungen</a>
</li>
</ul>
</ul>
</nav>
<nav class="c-main-menu__section c-main-menu__section-03 c-main-menu__section--services">
<ul class="c-main-menu__list c-main-menu__list--lvl1">
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuMärkteTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuMärkteTrigger" class="c-main-menu__section-title">Märkte</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Ärzte</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Immobilien</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Jobs</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Traueranzeigen</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuServicesTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuServicesTrigger" class="c-main-menu__section-title">Services</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Alexa-Skill</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Leserreisen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Push-Nachrichten</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Tägliche Rätsel</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Veranstaltungen</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">WhatsApp-Newsletter</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Archiv</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuVermarktungTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuVermarktungTrigger" class="c-main-menu__section-title">Vermarktung</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Private Kunden</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Gewerbliche Kunden</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Digitale Werbung</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Mediadaten</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuVerlagTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuVerlagTrigger" class="c-main-menu__section-title">Verlag</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Ausbildung</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Jobs</a>
</li>
</ul>
<li class="c-main-menu__item c-main-menu__item--lvl1">
<input type="checkbox" id="mainMenuMehrTrigger" class="c-main-menu__list-trigger" />
<label for="mainMenuMehrTrigger" class="c-main-menu__section-title">Mehr</label>
<ul class="c-main-menu__list c-main-menu__list--lvl2">
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Lorem ipsum</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Rafgenduks</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Dolor estisit amet</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Mustertext</a>
</li>
<li class="c-main-menu__item c-main-menu__item--lvl2">
<a href="#" class="c-main-menu__anchor">Und noch Einpunkt</a>
</li>
</ul>
</ul>
</nav>
</div>
</div>
</div>
<div class="c-top-bar__item">
<div class="c-searchbox c-searchbox--standalone js-searchbox">
<input type="checkbox" id="searchboxStandaloneTrigger" class="c-searchbox__trigger" />
<label for="searchboxStandaloneTrigger" class="c-searchbox__label">
<span class="o-css-icon o-css-icon--search"></span>
Suche
</label>
<div class="c-searchbox__actor">
<div class="c-searchbox__section">
<span class="c-searchbox__section-title">Suche</span>
<form class="o-form o-form--search">
<div class="grid-x grid-margin-x">
<div class="cell large-8 medium-8 small-8">
<div class="o-form__field">
<div class="o-form__fluid">
<input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
</div>
<span class="o-form__status o-form__status--warning">
</span>
<span class="o-form__info" id="input-01"></span>
</div>
</div>
<div class="cell large-4 medium-4 small-4">
<input type="submit" class="o-form__input c-button c-button--full" value="Suchen">
</div>
</div>
<div id="kesearch_filters" class="o-searchfacets">
<div class="grid-x">
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 1</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_author" id="f1_1">
<label class="o-form__label o-form__label--checkbox" for="f1_1">
Autoren</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_nws" id="f1_2">
<label class="o-form__label o-form__label--checkbox" for="f1_2">
News</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_pg" id="f1_3">
<label class="o-form__label o-form__label--checkbox" for="f1_3">
Seiten</label>
</fieldset>
</div>
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 2</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_24h" id="f2_1">
<label class="o-form__label o-form__label--checkbox" for="f2_1">
Letzte 24 Stunden</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_7d" id="f2_2">
<label class="o-form__label o-form__label--checkbox" for="f2_2">
Letzte Woche</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_30d" id="f2_3">
<label class="o-form__label o-form__label--checkbox" for="f2_3">
Letzter Monat</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_old" id="f2_4">
<label class="o-form__label o-form__label--checkbox" for="f2_4">
Älter</label>
</fieldset>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="c-top-bar__center">
<div class="c-top-bar__item">
<div class="c-logo">
<img class="c-logo__img" src="/assets/img/logo.svg">
</div>
</div>
</div>
<div class="c-top-bar__right">
<div class="c-top-bar__item">
<div class="c-subscription-menu c-subscription-menu--standalone">
<input type="checkbox" id="subscriptionMenuStandaloneTrigger" class="c-subscription-menu__trigger" />
<label for="subscriptionMenuStandaloneTrigger" class="c-subscription-menu__label">
<span class="o-css-icon o-css-icon--haz"></span>
Abo
</label>
<div class="c-subscription-menu__actor">
<nav class="c-subscription-menu__section">
<ul class="c-subscription-menu__list c-subscription-menu__list--lvl1">
<li class="c-subscription-menu__item c-subscription-menu__item--lvl1">
<span class="c-subscription-menu__section-title">Abo</span>
<ul class="c-subscription-menu__list c-subscription-menu__list--lvl2">
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo bestellen</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo mit Tablet bestellen</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Abo verwalten</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Reklamationsservice</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">ABOEXTRA</a>
</li>
<li class="c-subscription-menu__item c-subscription-menu__item--lvl2">
<a href="#" class="c-subscription-menu__anchor">Vorteile</a>
</li>
</ul>
</ul>
</nav>
</div>
</div>
</div>
<div class="c-top-bar__item">
<a class="c-login o-link-covert js-customizedUI" href="#" data-href="/assets/json/login.json">
<span class="o-css-icon o-css-icon--user"></span>
Anmelden
</a>
</div>
</div>
</div>
</div>
</div>
<!-- only for demo purposes -->
<div style="height: 200vh;">Content</div>
<!-- only for demo purposes -->
<div class="c-top-bar">
<div class="c-top-bar__container">
<div class="c-top-bar__row">
<div class="c-top-bar__left">
<div class="c-top-bar__item">
{% render '@main-menu' %}
</div>
<div class="c-top-bar__item">
{% render '@searchbox' %}
</div>
</div>
<div class="c-top-bar__center">
<div class="c-top-bar__item">
{% render '@logo' %}
</div>
</div>
<div class="c-top-bar__right">
<div class="c-top-bar__item">
{% render '@subscription-menu' %}
</div>
<div class="c-top-bar__item">
{% render '@login' %}
</div>
</div>
</div>
</div>
</div>
{% if showDemoContent %}
<!-- only for demo purposes -->
<div style="height: 200vh;">Content</div>
<!-- only for demo purposes -->
{% endif %}
{
"additionalClasses": "",
"showDemoContent": true
}
import _throttle from 'lodash/throttle';
import _debounce from 'lodash/debounce';
class TopBar {
constructor(element) {
this.element = element;
this.topBarHeight = this.element.getBoundingClientRect().height;
this._addHelperDiv();
this._addEventListeners();
}
/**
* Prepends a div to the body element, so the top-bar can have a fixed position.
* @private
*/
_addHelperDiv() {
this.topBarHelper = document.createElement('DIV');
this._setHelperDivHeight();
document.body.insertBefore(this.topBarHelper, this.element);
document.body.style.marginTop = (this.topBarHeight);
}
/**
* Adds handlers to scroll and resizing events to update sticky class and to
* resize the topBarHelper
*
* @todo Check if we can add EventListeners once and extend handlers via API.
*
* @private
*/
_addEventListeners() {
window.addEventListener('scroll', _throttle(() => {
const bodyTop = document.body.getBoundingClientRect().top;
if (bodyTop <= this.topBarHeight * -1 && bodyTop >= this.topBarHeight * -2) {
this.element.classList.add('is-invisible');
} else if (bodyTop < this.topBarHeight * -2) {
this.element.classList.add('is-sticky');
this.element.classList.remove('is-invisible');
} else {
this.element.classList.remove('is-sticky', 'is-invisible');
this._setHelperDivHeight();
}
}, window.haz.globalTimeout));
window.addEventListener('resize', _debounce(() => {
this._setHelperDivHeight();
}, window.haz.globalTimeout));
}
/**
* Update/Set helper div height
*
* @private
*/
_setHelperDivHeight() {
this.topBarHelper.style.height = `${this.element.getBoundingClientRect().height}px`;
}
}
export default TopBar;
.c-top-bar {
background-color: transparent;
&__container {
@include xy-grid-container($global-width);
background-color: white;
box-shadow: rem-calc(0 3 5) rgba($color-black, .15);
padding: rem-calc(15) 0;
position: relative;
z-index: 1000;
}
&__row {
@include xy-grid;
}
&__center,
&__left {
align-items: center;
display: flex;
}
&__center {
@include xy-cell(auto);
order: 0;
}
&__left {
order: 1;
}
&__left,
&__right {
@include xy-cell(shrink);
}
&__right {
display: none;
}
@include breakpoint(medium) {
&__container {
padding-bottom: rem-calc(25);
padding-top: rem-calc(25);
}
}
@include breakpoint(large) {
&__container {
padding-bottom: rem-calc(50);
padding-top: rem-calc(50);
}
&__center {
justify-content: center;
@include xy-cell(40%);
}
&__center,
&__left {
order: inherit;
}
&__left,
&__right {
@include xy-cell(30%);
}
&__right {
align-items: center;
display: flex;
justify-content: flex-end;
}
}
//:not(.no-js) & {
// left: 0;
// position: absolute;
// top: 0;
// width: 100%;
// z-index: $z-index-top-bar;
//}
&.is-sticky {
position: fixed;
.c-top-bar__container {
padding-bottom: rem-calc(15);
padding-top: rem-calc(15);
}
}
}
There are no notes for this item.