Sticky bar

The sticky bar may only be used in conjunction with the footer. The sticky bar is always placed above the footer. The element contains the "schwarz"-badge and an optional to-top link to get back to the top of the page.

preview

<div class="sticky-bar">
    <div class="sticky-bar-content container-responsive">
        <img src="../../.././_assets/images/badge-white.svg" class="sticky-bar-badge" />
        <a href="#" class="sticky-bar-to-top invisible" data-controller="sticky-bar/to-top">
            <svg class="icon sticky-bar-to-top-icon icon-2" xmlns="http://www.w3.org/2000/svg"
                role="img" focusable="false">
                <title>To top</title>
                <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-up">
                </use>
            </svg>To top text</a>
    </div>
</div>

Positioning#

The element is always positioned at the bottom of the screen using position: sticky. Only if the footer is inside the viewport, the sticky bar is rendered directly above the footer. Thus, the sticky bar is always in the viewer's visible area.

preview

<div class="container-responsive">
    <h1>Some example content to show the "sticky" behavior ;)</h1>
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
    <hr />
</div>
<div class="sticky-bar">
    <div class="sticky-bar-content container-responsive">
        <img src="../../.././_assets/images/badge-white.svg" class="sticky-bar-badge" />
        <a href="#" class="sticky-bar-to-top invisible" data-controller="sticky-bar/to-top">
            <svg class="icon sticky-bar-to-top-icon icon-2" xmlns="http://www.w3.org/2000/svg"
                role="img" focusable="false">
                <title>To top</title>
                <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-up">
                </use>
            </svg>To top text</a>
    </div>
</div>
<footer class="footer" role="contentinfo">
    <div class="container-responsive">
        <ul class="list-unstyled mb-0">
            <li class="mb-2">
                <strong class="footer-headline">Headline</strong>
                <ul class="footer-list ">
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                </ul>
            </li>
            <li>
                <strong class="footer-headline">Headline</strong>
                <ul class="footer-list ">
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                </ul>
            </li>
        </ul>
        <hr />
        <ul class="footer-list ">
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Main-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
        </ul>
    </div>
</footer>

To-top link#

On the right side of the sticky bar, under certain conditions, there is a link to jump to the start of the page. By default, this link is only displayed if the scroll height is 600px or more, and only if the content of the page is longer than 4000px. Otherwise the to-top link is not shown at all. This default setting is a recommendation from us, but can be customized as described below.

JavaScript#

The sticky bar does work without javascript but not the to-top link. You can import our javascript bundle cake.js to automatically use this feature. You only must ensure that the property data-controller="sticky-bar/link" is set on the link element.

Initialization#

To initialize the javascript with default configuration you could simply run the following code:

document.addEventListener ('DOMContentLoaded', () => {
    window.cake.stickyBar ();
});

Customization#

To customize the default behavior you can only embed the stickyBar.js file into your mockups. Then you can initialize the functionality by calling:

document.addEventListener ('DOMContentLoaded', () => {
    window.cake.toTop (options = {
        toTopElement: null,
        toTopQuerySelector: '[data-controller="sticky-bar/to-top"]',
        offsetPx: 600,
        minPageHeightPx: 4000,
        enableSmoothScrolling: true,
    });
});
  • toTopElement [HTMLElement]
    • provide the specific to-top link HTMLElement. (optional).
  • toTopQuerySelector [String]
    • provide a query-selector to select all to-top link elements. (optional, default: [data-controller="sticky-bar/to-top"]).
  • offsetPx [Number]
    • number of pixels to use as offset like explained below. (optional, default: 600).
  • minPageHeightPx [Number]
    • number of pixels the page height must be to enable the to-top link. (optional, default: 4000).
  • enableSmoothScrolling [Boolean]

If you do provide the options.toTopElement the options.toTopQuerySelector option gets ignored. If you do not provide any options.toTopElement always the options.toTopQuerySelector is used!

Offset#

The to-top link is shown after an offset of (default) 600px. You can set a custom offset by adding the optional parameter offsetPx during the initialisation.

stickyBar ({
    offsetPx: 1000,
});

The above example will set the offset to 1000px.

Scroll behavior#

By default the script will set the scroll-behavior: smooth to the document-element of the page for a smooth scroll animation. This functionality is enabled by default but you have the option to disable this behavior. Set enableSmoothScrolling: false as second value to disable smooth scroll animation.

totop ({
    enableSmoothScrolling: false,
});

With this initialization the smooth scrolling will be disabled and therefore the site jumps directly to-top of the page, when clicking the button.