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.