diff --git a/dist/scroll-up-bar.js b/dist/scroll-up-bar.js index 3cc39b9..57606e6 100644 --- a/dist/scroll-up-bar.js +++ b/dist/scroll-up-bar.js @@ -10,9 +10,7 @@ enterViewport: $.noop, fullyEnterViewport: $.noop, exitViewport: $.noop, - partiallyExitViewport: $.noop, - delay: 400, - speed: 200 + partiallyExitViewport: $.noop }, options); function isFullyInViewport() { @@ -33,95 +31,97 @@ $.scrollupbar.isInViewport = isInViewport(); $.scrollupbar.isFullyInViewport = isFullyInViewport(); - $window.on('scroll.scrollupbar', function() { - var y = $window.scrollTop(), - barHeight = $bar.outerHeight(); - - // Ignore elastic scrolling. - if (y < 0 || y > ($document.height() - $window.height())) { - return; - } - - // Cancel the event fired by the previous scroll. - if (timeout) { - clearTimeout(timeout); + $window.on('scroll.scrollupbar', function() { + var y = $window.scrollTop(), + barHeight = $bar.outerHeight(); + + // Ignore elastic scrolling. + if (y < 0 || y > ($document.height() - $window.height())) { + return; + } + + // Cancel the event fired by the previous scroll. + if (timeout) { + clearTimeout(timeout); + } + + if (y < lastY) { // Scrolling up + // If the bar is hidden, place it right above the top frame. + if (!$.scrollupbar.isInViewport && lastY - barHeight >= minY) { + $bar.css('top', lastY - barHeight); + $.scrollupbar.isInViewport = true; + options.enterViewport(); } - if (y < lastY) { // Scrolling up - // If the bar is hidden, place it right above the top frame. - if (!$.scrollupbar.isInViewport && lastY - barHeight >= minY) { - $bar.css('top', lastY - barHeight); - $.scrollupbar.isInViewport = true; - options.enterViewport(); + // Scrolls up bigger than the bar's height fixes the bar on top. + if (isFullyInViewport()) { + if (y >= minY) { + $bar.css({ + 'position': 'fixed', + 'top': 0 + }); + } else { + $bar.css({ + 'position': 'absolute', + 'top': initialPosTop + }); } - // Scrolls up bigger than the bar's height fixes the bar on top. - if (isFullyInViewport()) { - if (y >= minY) { - $bar.css({ - 'position': 'fixed', - 'top': 0 - }); - } else { - $bar.css({ - 'position': 'absolute', - 'top': initialPosTop - }); - } - - if (!$.scrollupbar.isFullyInViewport) { - $.scrollupbar.isFullyInViewport = true; - options.fullyEnterViewport(); - } + if (!$.scrollupbar.isFullyInViewport) { + $.scrollupbar.isFullyInViewport = true; + options.fullyEnterViewport(); } + } - // Fire an event to reveal the entire bar after [options.delay]ms if the scroll - // wasn't big enough. - timeout = setTimeout(function() { - if (!$.scrollupbar.isFullyInViewport) { - $bar.css({ - 'position': 'fixed', - 'top': $bar.offset().top - y - }); - - $bar.animate({'top': 0}, options.speed, function() { - $.scrollupbar.isFullyInViewport = true; - options.fullyEnterViewport(); - }); - } - }, options.delay); - } else if (y > lastY) { // Scrolling down - // Unfix the bar allowing it to scroll with the page. - if ($.scrollupbar.isFullyInViewport) { + // Fire an event to reveal the entire bar after 400ms if the scroll + // wasn't big enough. + timeout = setTimeout(function() { + if (!$.scrollupbar.isFullyInViewport) { $bar.css({ - 'transform': 'translate3d(0,0,0)', // Fix for iOS invisible element bug when changing position values while scrolling - 'position': 'absolute', - 'top': lastY > minY ? lastY : initialPosTop + 'position': 'fixed', + 'top': $bar.offset().top - y }); - if (!isFullyInViewport()) { - $.scrollupbar.isFullyInViewport = false; - options.partiallyExitViewport(); - } + $bar.animate({'top': 0}, 100, function() { + $.scrollupbar.isFullyInViewport = true; + options.fullyEnterViewport(); + }); } - - if ($.scrollupbar.isInViewport && !isInViewport()) { - $.scrollupbar.isInViewport = false; - options.exitViewport(); + }, 400); + } else if (y > lastY) { // Scrolling down + // Unfix the bar allowing it to scroll with the page. + if ($.scrollupbar.isFullyInViewport) { + $bar.css({ + // translate3d fixes iOS invisible element bug when changing + // position values while scrolling. + 'transform': 'translate3d(0, 0, 0)', + 'position': 'absolute', + 'top': lastY > minY ? lastY : initialPosTop + }); + + if (!isFullyInViewport()) { + $.scrollupbar.isFullyInViewport = false; + options.partiallyExitViewport(); } + } - // Fire an event to hide the entire bar after [options.delay]ms if the scroll - // wasn't big enough. - timeout = setTimeout(function() { - if (isInViewport() && y - barHeight >= minY) { - $bar.animate({'top': y - barHeight}, options.speed, function() { - $.scrollupbar.isInViewport = false; - options.exitViewport(); - }); - } - }, options.delay); + if ($.scrollupbar.isInViewport && !isInViewport()) { + $.scrollupbar.isInViewport = false; + options.exitViewport(); } + // Fire an event to hide the entire bar after 400ms if the scroll + // wasn't big enough. + timeout = setTimeout(function() { + if (isInViewport() && y - barHeight >= minY) { + $bar.animate({'top': y - barHeight}, 100, function() { + $.scrollupbar.isInViewport = false; + options.exitViewport(); + }); + } + }, 400); + } + lastY = y; }); diff --git a/dist/scroll-up-bar.min.js b/dist/scroll-up-bar.min.js index bea40d4..b04d87c 100644 --- a/dist/scroll-up-bar.min.js +++ b/dist/scroll-up-bar.min.js @@ -1,2 +1,2 @@ /* scroll-up-bar v0.3.0 (https://github.com/eduardomb/scroll-up-bar) */ -!function(a){"use strict";var b;a.scrollupbar=function(c,d){function e(){return h.scrollTop()<=c.offset().top}function f(){return h.scrollTop()i.height()-h.height()||(g&&clearTimeout(g),b=j&&(c.css("top",k-m),a.scrollupbar.isInViewport=!0,d.enterViewport()),e()&&(b>=j?c.css({position:"fixed",top:0}):c.css({position:"absolute",top:l}),a.scrollupbar.isFullyInViewport||(a.scrollupbar.isFullyInViewport=!0,d.fullyEnterViewport())),g=setTimeout(function(){a.scrollupbar.isFullyInViewport||(c.css({position:"fixed",top:c.offset().top-b}),c.animate({top:0},d.speed,function(){a.scrollupbar.isFullyInViewport=!0,d.fullyEnterViewport()}))},d.delay)):b>k&&(a.scrollupbar.isFullyInViewport&&(c.css({transform:"translate3d(0,0,0)",position:"absolute",top:k>j?k:l}),e()||(a.scrollupbar.isFullyInViewport=!1,d.partiallyExitViewport())),a.scrollupbar.isInViewport&&!f()&&(a.scrollupbar.isInViewport=!1,d.exitViewport()),g=setTimeout(function(){f()&&b-m>=j&&c.animate({top:b-m},d.speed,function(){a.scrollupbar.isInViewport=!1,d.exitViewport()})},d.delay)),k=b)}),b=function(){h.off(".scrollupbar"),c.css({position:"absolute",top:l})},c},a.scrollupbar.destroy=function(){if(b)return b()},a.fn.scrollupbar=function(b){return a.scrollupbar(this,b)}}(jQuery); \ No newline at end of file +(function(e){"use strict";var t;e.scrollupbar=function(n,r){function i(){return o.scrollTop()<=n.offset().top}function s(){return o.scrollTop()u.height()-o.height())return;c&&clearTimeout(c),t=a&&(n.css("top",f-h),e.scrollupbar.isInViewport=!0,r.enterViewport()),i()&&(t>=a?n.css({position:"fixed",top:0}):n.css({position:"absolute",top:l}),e.scrollupbar.isFullyInViewport||(e.scrollupbar.isFullyInViewport=!0,r.fullyEnterViewport())),c=setTimeout(function(){e.scrollupbar.isFullyInViewport||(n.css({position:"fixed",top:n.offset().top-t}),n.animate({top:0},100,function(){e.scrollupbar.isFullyInViewport=!0,r.fullyEnterViewport()}))},400)):t>f&&(e.scrollupbar.isFullyInViewport&&(n.css({transform:"translate3d(0, 0, 0)",position:"absolute",top:f>a?f:l}),i()||(e.scrollupbar.isFullyInViewport=!1,r.partiallyExitViewport())),e.scrollupbar.isInViewport&&!s()&&(e.scrollupbar.isInViewport=!1,r.exitViewport()),c=setTimeout(function(){s()&&t-h>=a&&n.animate({top:t-h},100,function(){e.scrollupbar.isInViewport=!1,r.exitViewport()})},400)),f=t}),t=function(){o.off(".scrollupbar"),n.css({position:"absolute",top:l})},n},e.scrollupbar.destroy=function(){if(t)return t()},e.fn.scrollupbar=function(t){return e.scrollupbar(this,t)}})(jQuery); diff --git a/src/scroll-up-bar.js b/src/scroll-up-bar.js index 04dfaea..4eef75f 100644 --- a/src/scroll-up-bar.js +++ b/src/scroll-up-bar.js @@ -9,9 +9,7 @@ enterViewport: $.noop, fullyEnterViewport: $.noop, exitViewport: $.noop, - partiallyExitViewport: $.noop, - delay: 400, - speed: 200 + partiallyExitViewport: $.noop }, options); function isFullyInViewport() { @@ -32,95 +30,97 @@ $.scrollupbar.isInViewport = isInViewport(); $.scrollupbar.isFullyInViewport = isFullyInViewport(); - $window.on('scroll.scrollupbar', function() { - var y = $window.scrollTop(), - barHeight = $bar.outerHeight(); - - // Ignore elastic scrolling. - if (y < 0 || y > ($document.height() - $window.height())) { - return; - } - - // Cancel the event fired by the previous scroll. - if (timeout) { - clearTimeout(timeout); + $window.on('scroll.scrollupbar', function() { + var y = $window.scrollTop(), + barHeight = $bar.outerHeight(); + + // Ignore elastic scrolling. + if (y < 0 || y > ($document.height() - $window.height())) { + return; + } + + // Cancel the event fired by the previous scroll. + if (timeout) { + clearTimeout(timeout); + } + + if (y < lastY) { // Scrolling up + // If the bar is hidden, place it right above the top frame. + if (!$.scrollupbar.isInViewport && lastY - barHeight >= minY) { + $bar.css('top', lastY - barHeight); + $.scrollupbar.isInViewport = true; + options.enterViewport(); } - if (y < lastY) { // Scrolling up - // If the bar is hidden, place it right above the top frame. - if (!$.scrollupbar.isInViewport && lastY - barHeight >= minY) { - $bar.css('top', lastY - barHeight); - $.scrollupbar.isInViewport = true; - options.enterViewport(); + // Scrolls up bigger than the bar's height fixes the bar on top. + if (isFullyInViewport()) { + if (y >= minY) { + $bar.css({ + 'position': 'fixed', + 'top': 0 + }); + } else { + $bar.css({ + 'position': 'absolute', + 'top': initialPosTop + }); } - // Scrolls up bigger than the bar's height fixes the bar on top. - if (isFullyInViewport()) { - if (y >= minY) { - $bar.css({ - 'position': 'fixed', - 'top': 0 - }); - } else { - $bar.css({ - 'position': 'absolute', - 'top': initialPosTop - }); - } - - if (!$.scrollupbar.isFullyInViewport) { - $.scrollupbar.isFullyInViewport = true; - options.fullyEnterViewport(); - } + if (!$.scrollupbar.isFullyInViewport) { + $.scrollupbar.isFullyInViewport = true; + options.fullyEnterViewport(); } + } - // Fire an event to reveal the entire bar after [options.delay]ms if the scroll - // wasn't big enough. - timeout = setTimeout(function() { - if (!$.scrollupbar.isFullyInViewport) { - $bar.css({ - 'position': 'fixed', - 'top': $bar.offset().top - y - }); - - $bar.animate({'top': 0}, options.speed, function() { - $.scrollupbar.isFullyInViewport = true; - options.fullyEnterViewport(); - }); - } - }, options.delay); - } else if (y > lastY) { // Scrolling down - // Unfix the bar allowing it to scroll with the page. - if ($.scrollupbar.isFullyInViewport) { + // Fire an event to reveal the entire bar after 400ms if the scroll + // wasn't big enough. + timeout = setTimeout(function() { + if (!$.scrollupbar.isFullyInViewport) { $bar.css({ - 'transform': 'translate3d(0,0,0)', // Fix for iOS invisible element bug when changing position values while scrolling - 'position': 'absolute', - 'top': lastY > minY ? lastY : initialPosTop + 'position': 'fixed', + 'top': $bar.offset().top - y }); - if (!isFullyInViewport()) { - $.scrollupbar.isFullyInViewport = false; - options.partiallyExitViewport(); - } + $bar.animate({'top': 0}, 100, function() { + $.scrollupbar.isFullyInViewport = true; + options.fullyEnterViewport(); + }); } - - if ($.scrollupbar.isInViewport && !isInViewport()) { - $.scrollupbar.isInViewport = false; - options.exitViewport(); + }, 400); + } else if (y > lastY) { // Scrolling down + // Unfix the bar allowing it to scroll with the page. + if ($.scrollupbar.isFullyInViewport) { + $bar.css({ + // translate3d fixes iOS invisible element bug when changing + // position values while scrolling. + 'transform': 'translate3d(0, 0, 0)', + 'position': 'absolute', + 'top': lastY > minY ? lastY : initialPosTop + }); + + if (!isFullyInViewport()) { + $.scrollupbar.isFullyInViewport = false; + options.partiallyExitViewport(); } + } - // Fire an event to hide the entire bar after [options.delay]ms if the scroll - // wasn't big enough. - timeout = setTimeout(function() { - if (isInViewport() && y - barHeight >= minY) { - $bar.animate({'top': y - barHeight}, options.speed, function() { - $.scrollupbar.isInViewport = false; - options.exitViewport(); - }); - } - }, options.delay); + if ($.scrollupbar.isInViewport && !isInViewport()) { + $.scrollupbar.isInViewport = false; + options.exitViewport(); } + // Fire an event to hide the entire bar after 400ms if the scroll + // wasn't big enough. + timeout = setTimeout(function() { + if (isInViewport() && y - barHeight >= minY) { + $bar.animate({'top': y - barHeight}, 100, function() { + $.scrollupbar.isInViewport = false; + options.exitViewport(); + }); + } + }, 400); + } + lastY = y; });