Vanilla - Sticky v 0.4 : Better calc, resize calc, margin:0 on elemen…

…t by default, demo

_layouts/default.html

@@ -18,7 +18,7 @@
 <script src="assets/js/vanilla-js/plugins/vanilla-formchecker.js?v=0.2"></script>
 <script src="assets/js/vanilla-js/plugins/vanilla-fakeinputbox.js?v=0.2"></script>
 <script src="assets/js/vanilla-js/plugins/vanilla-responsive-images.js?v=0.2"></script>
-<script src="assets/js/vanilla-js/plugins/vanilla-sticky.js?v=0.3"></script>
+<script src="assets/js/vanilla-js/plugins/vanilla-sticky.js?v=0.4"></script>
 <!--[if lt IE 9 ]><script src="assets/js/vanilla-js/libs/vanilla-ie.js?v=0.3"></script><![endif]-->
 {% include after-head.html %}
 {{ content }}

assets/js/vanilla-js/plugins/vanilla-sticky.js

@@ -1,14 +1,14 @@
 /*
  * 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
  */
 
 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);
         }
     }
 

demos-sticky.html

@@ -0,0 +1,29 @@
+---
+layout: default
+---
+<script>
+window.domReady(function() {
+    var els = $$_('h3', document.getElementById('sticky'));
+    for (var el in els) {
+        if (els.hasOwnProperty(el) && typeof els[el] == 'object' && ('tagName' in els[el])) {
+            new vanillaSticky(els[el], {
+                stickyParent: els[el].parentNode
+            });
+        }
+    }
+});
+</script>
+<div id="sticky">
+    <div>
+        <h3>az</h3>
+        <p>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.</p>
+    </div>
+    <div>
+        <h3>bz</h3>
+        <p>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.</p>
+    </div>
+    <div>
+        <h3>cz</h3>
+        <p>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.</p>
+    </div>
+</div>