fix wrapper class logic

kirchbergerknorr · Jan 20, 2017 · bd7c309 · bd7c309
1 parent d88cde6
commit bd7c309
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/examples/simple.html b/examples/simple.html
@@ -16,11 +16,10 @@
             background: #335C7D;
             color: #fff;
             font-family: 'PT Sans', sans-serif;
-            -webkit-transition: top .33s ease-in-out;
-            -moz-transition: top .33s ease-in-out;
-            transition: top .33s ease-in-out;
+            -webkit-transition: top 700ms;
+            -moz-transition: top 700ms;
+            transition: top 700ms;
             position: relative;
-            top: 0;
         }
         .content {
             height: 1000px;
@@ -37,7 +36,11 @@
         }
         .is-sticky {
             box-shadow: 0 1px 10px #333;
+            top: 0 !important;
+        }
+        .sticky-wrapper {
             position: fixed;
+            top: -300px;
         }
         .pre-header {
             height: 100px;

diff --git a/sticky-header.js b/sticky-header.js
@@ -18,7 +18,8 @@ var jQuery = require('jquery');
         return this.each(function() {
 
             var intervalId = false;
-            var isCurrentlySticky = false;
+            var isCurrentlySticky = null;
+            var isCurrentlyVisible = null;
             var scrollbarPreviousVerticalPosition = 0;
 
             var $element = $(this);
@@ -30,14 +31,7 @@ var jQuery = require('jquery');
                 + parseInt($(targetElement).css('margin-bottom').replace('px', ''))
                 + parseInt($(targetElement).css('margin-top').replace('px', ''));
 
-            var minTop = settings.minTop;
-            if (!minTop) {
-                if (settings.type == 'scroll-top') {
-                    minTop = $(targetElement).offset().top + stickyElementHeight;
-                } else {
-                    minTop = $(targetElement).offset().top;
-                }
-            }
+            var minTop = settings.minTop || $(targetElement).offset().top;
 
             $(window).scroll(function (event) {
                 if (settings.minimalViewportWidth == 0 || verge.viewportW() < settings.minimalViewportWidth) {
@@ -46,42 +40,46 @@ var jQuery = require('jquery');
                     var isSticky = false;
                     var isScrollingDown = scrollbarVerticalPosition > scrollbarPreviousVerticalPosition;
                     var isVisible = scrollbarVerticalPosition <= minTop;
+                    var isVisibleSticky = scrollbarVerticalPosition <= minTop + stickyElementHeight;
 
                     if (isVisible) {
                         isSticky = false;
                     } else if (isScrollingDown) {
-                        isSticky = (settings.type == 'always');
+                        isSticky = (settings.type == 'always') || isVisibleSticky;
                     } else {
                         isSticky = true;
                     }
 
                     scrollbarPreviousVerticalPosition = scrollbarVerticalPosition;
 
-                    if (isCurrentlySticky == isSticky) {
+                    if (isCurrentlySticky == isSticky && isCurrentlyVisible == isVisible) {
                         return;
                     }
 
                     if (intervalId) {
                         clearTimeout(intervalId);
                     }
 
-                    if (isSticky) {
-                        intervalId = setTimeout(function () {
+                    intervalId = setTimeout(function () {
+                        if (isSticky) {
                             $element.addClass(settings.isStickyClass);
-                            $element.addClass(settings.stickyWrapperClass);
-                            $body.removeClass(settings.scrollTopClass);
-                            $body.css('padding-top', stickyElementHeight);
-                        }, settings.timeout);
-                    } else {
-                        intervalId = setTimeout(function () {
+                        } else {
                             $element.removeClass(settings.isStickyClass);
-                            $element.removeClass(settings.stickyWrapperClass);
+                        }
+
+                        if (isVisible) {
                             $body.addClass(settings.scrollTopClass);
                             $body.css('padding-top', 0);
-                        }, settings.timeout);
-                    }
+                            $element.removeClass(settings.stickyWrapperClass);
+                        } else {
+                            $body.removeClass(settings.scrollTopClass);
+                            $body.css('padding-top', stickyElementHeight);
+                            $element.addClass(settings.stickyWrapperClass);
+                        }
+                    }, settings.timeout);
 
                     isCurrentlySticky = isSticky;
+                    isCurrentlyVisible = isVisible;
                 }
             });
         });