diff --git a/_layouts/default.html b/_layouts/default.html index 1cf7cda..dfb8112 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -18,7 +18,7 @@ - + {% include after-head.html %} {{ content }} diff --git a/assets/js/vanilla-js/plugins/vanilla-sticky.js b/assets/js/vanilla-js/plugins/vanilla-sticky.js index 5e77f6b..53f088a 100644 --- a/assets/js/vanilla-js/plugins/vanilla-sticky.js +++ b/assets/js/vanilla-js/plugins/vanilla-sticky.js @@ -1,6 +1,6 @@ /* * Plugin Name: Vanilla Sticky - * Version: 0.3 + * Version: 0.4 * Plugin URL: https://github.com/Darklg/JavaScriptUtilities * JavaScriptUtilities Sticky may be freely distributed under the MIT license. * Usage status: Work in progress @@ -8,7 +8,7 @@ var vanillaSticky = function(el, options) { - var origElTop = el.offsetTop, + var origElTop = false, maxScroll = false, maxTop = false, wrapper = false; @@ -18,32 +18,58 @@ var vanillaSticky = function(el, options) { } function init() { + // Set initial style el.style.position = 'relative'; + el.style.margin = '0'; if (options.stickyParent) { options.stickyParent.style.position = 'relative'; - maxTop = options.stickyParent.clientHeight - el.clientHeight; - maxScroll = options.stickyParent.offsetTop + maxTop; } // Create parent node to avoid layout change wrapper = document.createElement('div'); el.parentNode.insertBefore(wrapper, el); wrapper.appendChild(el); - wrapper.style.minHeight = wrapper.clientHeight + 'px'; // Launch events launchEvents(); } + function calcScroll() { + + // Get element offset + var refnode = el; + origElTop = refnode.offsetTop; + while (origElTop === 0) { + refnode = refnode.parentNode; + if (!refnode) { + break; + } + origElTop = refnode.parentNode.offsetTop; + } + // Get parent scroll dimensions + if (options.stickyParent) { + maxTop = options.stickyParent.clientHeight - el.clientHeight; + maxScroll = options.stickyParent.offsetTop + maxTop; + } + wrapper.style.minHeight = wrapper.clientHeight + 'px'; + } + function launchEvents() { + + // Resize event + calcScroll(); // Scroll event + listenScroll(); + if (window.addEventListener) { window.addEventListener('scroll', listenScroll); + window.addEventListener('resize', calcScroll); } else if (window.attachEvent) { window.attachEvent("onscroll", listenScroll); + window.attachEvent("onresize", calcScroll); } } diff --git a/demos-sticky.html b/demos-sticky.html new file mode 100644 index 0000000..e7f33ed --- /dev/null +++ b/demos-sticky.html @@ -0,0 +1,29 @@ +--- +layout: default +--- + +
+
+

az

+

If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on.

+
+
+

bz

+

If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on.

+
+
+

cz

+

If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on.

+
+
\ No newline at end of file