stickyCrumb

This Javascript snippet changes breadcrumb navigation to stick to top of page when scrolling down a webpage. It works by selecting first occurrence of a breadcrumb selector, cloning it, and sticking it to the man… I mean top, page top!

Minimal setup

HTML

<div id="exampleID">
    <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/">Link</a></li>
         <li><a href="/">Link</a></li>
    </ul>
</div>

Javascript

<script src="stickycrumb.js"></script>
<script>
    (function () {
        stickyCrumb.settings.containerSelector = '#exampleID';
        stickyCrumb.settings.listSelector = ' > ul';//HAS TO BE CHILD OF stickyCrumb.settings.containerSelector!!!
        stickyCrumb.start();
    }());
</script>

Advanced settings

stickyCrumb can be disabled so that it has only a back to top button.
stickyCrumb.settings.breadcrumb = 0;

Back to top button settings:
stickyCrumb.settings.toTopButton = 0; Value 0/1, Off/On
stickyCrumb.settings.toTopSize = Number; Element size in pixels. Default is 50.
stickyCrumb.settings.toTopIcon = String; SVG image in string format.

By default it is activated only on touch enabled devices. This can be set off with so it works on PC too. (Not recommended):
stickyCrumb.settings.touchOnly = 0;

stickyCrumb.settings.breakpoint = Number; Default is 992, stickyCrumb is be activated when screenwidth is below this number.

NOTE: By default stickyCrumb works only on touch enabled devices!