latest autohidingNavbar
psychobunny
8 years ago
parent
685f755b5f
commit
712c7e0550
@ -0,0 +1,210 @@
|
||||
;(function($, window, document, undefined) {
|
||||
var pluginName = 'autoHidingNavbar',
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
_scrollThrottleTimer = null,
|
||||
_resizeThrottleTimer = null,
|
||||
_throttleDelay = 70,
|
||||
_lastScrollHandlerRun = 0,
|
||||
_previousScrollTop = null,
|
||||
_windowHeight = $window.height(),
|
||||
_visible = true,
|
||||
_hideOffset,
|
||||
defaults = {
|
||||
disableAutohide: false,
|
||||
showOnUpscroll: true,
|
||||
showOnBottom: true,
|
||||
hideOffset: 'auto', // "auto" means the navbar height
|
||||
animationDuration: 200,
|
||||
navbarOffset: 0
|
||||
};
|
||||
|
||||
function AutoHidingNavbar(element, options) {
|
||||
this.element = $(element);
|
||||
this.settings = $.extend({}, defaults, options);
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
this.init();
|
||||
}
|
||||
|
||||
function hide(autoHidingNavbar) {
|
||||
if (!_visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
autoHidingNavbar.element.addClass('navbar-hidden').animate({
|
||||
top: -1 * parseInt(autoHidingNavbar.element.css('height'), 10) + autoHidingNavbar.settings.navbarOffset
|
||||
}, {
|
||||
queue: false,
|
||||
duration: autoHidingNavbar.settings.animationDuration
|
||||
});
|
||||
|
||||
$('.dropdown.open .dropdown-toggle', autoHidingNavbar.element).dropdown('toggle');
|
||||
|
||||
_visible = false;
|
||||
|
||||
autoHidingNavbar.element.trigger('hide.autoHidingNavbar');
|
||||
}
|
||||
|
||||
function show(autoHidingNavbar) {
|
||||
if (_visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
autoHidingNavbar.element.removeClass('navbar-hidden').animate({
|
||||
top: 0
|
||||
}, {
|
||||
queue: false,
|
||||
duration: autoHidingNavbar.settings.animationDuration
|
||||
});
|
||||
_visible = true;
|
||||
|
||||
autoHidingNavbar.element.trigger('show.autoHidingNavbar');
|
||||
}
|
||||
|
||||
function detectState(autoHidingNavbar) {
|
||||
var scrollTop = $window.scrollTop(),
|
||||
scrollDelta = scrollTop - _previousScrollTop;
|
||||
|
||||
_previousScrollTop = scrollTop;
|
||||
|
||||
if (scrollDelta < 0) {
|
||||
if (_visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (autoHidingNavbar.settings.showOnUpscroll || scrollTop <= _hideOffset) {
|
||||
show(autoHidingNavbar);
|
||||
}
|
||||
}
|
||||
else if (scrollDelta > 0) {
|
||||
if (!_visible) {
|
||||
if (autoHidingNavbar.settings.showOnBottom && scrollTop + _windowHeight === $document.height()) {
|
||||
show(autoHidingNavbar);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (scrollTop >= _hideOffset) {
|
||||
hide(autoHidingNavbar);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function scrollHandler(autoHidingNavbar) {
|
||||
if (autoHidingNavbar.settings.disableAutohide) {
|
||||
return;
|
||||
}
|
||||
|
||||
_lastScrollHandlerRun = new Date().getTime();
|
||||
|
||||
detectState(autoHidingNavbar);
|
||||
}
|
||||
|
||||
function bindEvents(autoHidingNavbar) {
|
||||
$document.on('scroll.' + pluginName, function() {
|
||||
if (new Date().getTime() - _lastScrollHandlerRun > _throttleDelay) {
|
||||
scrollHandler(autoHidingNavbar);
|
||||
}
|
||||
else {
|
||||
clearTimeout(_scrollThrottleTimer);
|
||||
_scrollThrottleTimer = setTimeout(function() {
|
||||
scrollHandler(autoHidingNavbar);
|
||||
}, _throttleDelay);
|
||||
}
|
||||
});
|
||||
|
||||
$window.on('resize.' + pluginName, function() {
|
||||
clearTimeout(_resizeThrottleTimer);
|
||||
_resizeThrottleTimer = setTimeout(function() {
|
||||
_windowHeight = $window.height();
|
||||
}, _throttleDelay);
|
||||
});
|
||||
}
|
||||
|
||||
function unbindEvents() {
|
||||
$document.off('.' + pluginName);
|
||||
|
||||
$window.off('.' + pluginName);
|
||||
}
|
||||
|
||||
AutoHidingNavbar.prototype = {
|
||||
init: function() {
|
||||
this.elements = {
|
||||
navbar: this.element
|
||||
};
|
||||
|
||||
this.setDisableAutohide(this.settings.disableAutohide);
|
||||
this.setShowOnUpscroll(this.settings.showOnUpscroll);
|
||||
this.setShowOnBottom(this.settings.showOnBottom);
|
||||
this.setHideOffset(this.settings.hideOffset);
|
||||
this.setAnimationDuration(this.settings.animationDuration);
|
||||
|
||||
_hideOffset = this.settings.hideOffset === 'auto' ? parseInt(this.element.css('height'), 10) : this.settings.hideOffset;
|
||||
bindEvents(this);
|
||||
|
||||
return this.element;
|
||||
},
|
||||
setDisableAutohide: function(value) {
|
||||
this.settings.disableAutohide = value;
|
||||
return this.element;
|
||||
},
|
||||
setShowOnUpscroll: function(value) {
|
||||
this.settings.showOnUpscroll = value;
|
||||
return this.element;
|
||||
},
|
||||
setShowOnBottom: function(value) {
|
||||
this.settings.showOnBottom = value;
|
||||
return this.element;
|
||||
},
|
||||
setHideOffset: function(value) {
|
||||
this.settings.hideOffset = value;
|
||||
return this.element;
|
||||
},
|
||||
setAnimationDuration: function(value) {
|
||||
this.settings.animationDuration = value;
|
||||
return this.element;
|
||||
},
|
||||
show: function() {
|
||||
show(this);
|
||||
return this.element;
|
||||
},
|
||||
hide: function() {
|
||||
hide(this);
|
||||
return this.element;
|
||||
},
|
||||
destroy: function() {
|
||||
unbindEvents(this);
|
||||
show(this);
|
||||
$.data(this, 'plugin_' + pluginName, null);
|
||||
return this.element;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function(options) {
|
||||
var args = arguments;
|
||||
|
||||
if (options === undefined || typeof options === 'object') {
|
||||
return this.each(function() {
|
||||
if (!$.data(this, 'plugin_' + pluginName)) {
|
||||
$.data(this, 'plugin_' + pluginName, new AutoHidingNavbar(this, options));
|
||||
}
|
||||
});
|
||||
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
||||
var returns;
|
||||
|
||||
this.each(function() {
|
||||
var instance = $.data(this, 'plugin_' + pluginName);
|
||||
|
||||
if (instance instanceof AutoHidingNavbar && typeof instance[options] === 'function') {
|
||||
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
|
||||
}
|
||||
});
|
||||
|
||||
return returns !== undefined ? returns : this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
@ -1,9 +0,0 @@
|
||||
/*
|
||||
* Bootstrap Auto-Hiding Navbar - v1.0.0
|
||||
* An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.
|
||||
* http://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
!function(a,b,c,d){function e(b,c){this.element=a(b),this.settings=a.extend({},w,c),this._defaults=w,this._name=m,this.init()}function f(b){v&&(b.element.addClass("navbar-hidden").animate({top:-b.element.height()},{queue:!1,duration:b.settings.animationDuration}),a(".dropdown.open .dropdown-toggle",b.element).dropdown("toggle"),v=!1)}function g(a){v||(a.element.removeClass("navbar-hidden").animate({top:0},{queue:!1,duration:a.settings.animationDuration}),v=!0)}function h(a){var b=n.scrollTop(),c=b-t;if(t=b,0>c){if(v)return;(a.settings.showOnUpscroll||l>=b)&&g(a)}else if(c>0){if(!v)return void(a.settings.showOnBottom&&b+u===o.height()&&g(a));b>=l&&f(a)}}function i(a){a.settings.disableAutohide||(s=(new Date).getTime(),h(a))}function j(a){o.on("scroll."+m,function(){(new Date).getTime()-s>r?i(a):(clearTimeout(p),p=setTimeout(function(){i(a)},r))}),n.on("resize."+m,function(){clearTimeout(q),q=setTimeout(function(){u=n.height()},r)})}function k(){o.off("."+m),n.off("."+m)}var l,m="autoHidingNavbar",n=a(b),o=a(c),p=null,q=null,r=70,s=0,t=null,u=n.height(),v=!0,w={disableAutohide:!1,showOnUpscroll:!0,showOnBottom:!0,hideOffset:"auto",animationDuration:200};e.prototype={init:function(){return this.elements={navbar:this.element},this.setDisableAutohide(this.settings.disableAutohide),this.setShowOnUpscroll(this.settings.showOnUpscroll),this.setShowOnBottom(this.settings.showOnBottom),this.setHideOffset(this.settings.hideOffset),this.setAnimationDuration(this.settings.animationDuration),l="auto"===this.settings.hideOffset?this.element.height():this.settings.hideOffset,j(this),this.element},setDisableAutohide:function(a){return this.settings.disableAutohide=a,this.element},setShowOnUpscroll:function(a){return this.settings.showOnUpscroll=a,this.element},setShowOnBottom:function(a){return this.settings.showOnBottom=a,this.element},setHideOffset:function(a){return this.settings.hideOffset=a,this.element},setAnimationDuration:function(a){return this.settings.animationDuration=a,this.element},show:function(){return g(this),this.element},hide:function(){return f(this),this.element},destroy:function(){return k(this),g(this),a.data(this,"plugin_"+m,null),this.element}},a.fn[m]=function(b){var c=arguments;if(b===d||"object"==typeof b)return this.each(function(){a.data(this,"plugin_"+m)||a.data(this,"plugin_"+m,new e(this,b))});if("string"==typeof b&&"_"!==b[0]&&"init"!==b){var f;return this.each(function(){var d=a.data(this,"plugin_"+m);d instanceof e&&"function"==typeof d[b]&&(f=d[b].apply(d,Array.prototype.slice.call(c,1)))}),f!==d?f:this}}}(jQuery,window,document);
|
||||
Loading…
Reference in New Issue