Skip to content

Instantly share code, notes, and snippets.

@hygull

hygull/index.css

Last active January 12, 2017 13:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hygull/f0ed9aa2c3a50505d73c4f339448da4f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hygull/f0ed9aa2c3a50505d73c4f339448da4f to your computer and use it in GitHub Desktop.
Download ZIP
AutoHide Navbar Example created by hygull - https://repl.it/FHVc/0
Raw
index.css
/*Currently no css for the index.html*/
Raw
index.html
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto-Hiding Bootstrap Navbar Demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.demo-long {
margin-top: 100px;
margin-bottom: 200px;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Auto Hiding Bootstrap Fixed Navbar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Default</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1 style="margin-top:60px;">Auto-Hiding Bootstrap Navbar Demo</h1>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<p class="demo-long">
Long content...
</p>
<p class="demo-long">
Long content...
</p>
<p class="demo-long">
Long content...
</p>
<p class="demo-long">
Long content...
</p>
<p class="demo-long">
Long content...
</p>
<p class="demo-long">
Long content...
</p>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- <script src=".\index.js"> on windows-->
<script src="./index.js"></script> <!-- jquery.bootstrap-autohidingnavbar.js
-->
<script>
$("div.navbar-fixed-top").autoHidingNavbar();
</script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Raw
index.js
//index.js
;(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
};
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: -autoHidingNavbar.element.height()
}, {
queue: false,
duration: autoHidingNavbar.settings.animationDuration
});
$('.dropdown.open .dropdown-toggle', autoHidingNavbar.element).dropdown('toggle');
_visible = false;
}
function show(autoHidingNavbar) {
if (_visible) {
return;
}
autoHidingNavbar.element.removeClass('navbar-hidden').animate({
top: 0
}, {
queue: false,
duration: autoHidingNavbar.settings.animationDuration
});
_visible = true;
}
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' ? this.element.height() : 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment