From 151411c8c423e47615b3cc89725ae80d9dd53e3c Mon Sep 17 00:00:00 2001
From: Darklg <kev.rocher@gmail.com>
Date: Wed, 28 May 2014 21:06:38 +0200
Subject: [PATCH] Vanilla - Sticky v 0.4 : Better calc, resize calc, margin:0
 on element by default, demo

---
 _layouts/default.html                         |  2 +-
 .../js/vanilla-js/plugins/vanilla-sticky.js   | 36 ++++++++++++++++---
 demos-sticky.html                             | 29 +++++++++++++++
 3 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 demos-sticky.html

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 @@
 <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 }}
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
+---
+<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>
\ No newline at end of file