<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
see more:
http://wicky.nillia.ms/headroom.js/playroom/
-->
<div class="navbar navbar-inverse 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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique. </p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-12">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-12">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<div class="col-md-12">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
<!-- Important-->
<script type="text/javascript">
$(".navbar-fixed-top").headroom();
</script>
.headroom {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all .2s ease-in-out;
}
.headroom--unpinned {
top: -100px;
}
.headroom--pinned {
top: 0;
}
/*!
************************************************headroom.js************************************************
* headroom.js v0.5.0 - Give your page some headroom. Hide your header until you need it
* Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/headroom.js
* License: MIT
*/
(function(window, document) {
'use strict';
/* exported features */
var features = {
bind : !!(function(){}.bind),
classList : 'classList' in document.documentElement,
rAF : !!(window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame)
};
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
/**
* Handles debouncing of events via requestAnimationFrame
* @see http://www.html5rocks.com/en/tutorials/speed/animations/
* @param {Function} callback The callback to handle whichever event
*/
function Debouncer (callback) {
this.callback = callback;
this.ticking = false;
}
Debouncer.prototype = {
constructor : Debouncer,
/**
* dispatches the event to the supplied callback
* @private
*/
update : function() {
this.callback && this.callback();
this.ticking = false;
},
/**
* ensures events don't get stacked
* @private
*/
requestTick : function() {
if(!this.ticking) {
requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
this.ticking = true;
}
},
/**
* Attach this as the event listeners
*/
handleEvent : function() {
this.requestTick();
}
};
/**
* Helper function for extending objects
*/
function extend (object /*, objectN ... */) {
if(arguments.length <= 0) {
throw new Error('Missing arguments in extend function');
}
var result = object || {},
key,
i;
for (i = 1; i < arguments.length; i++) {
var replacement = arguments[i] || {};
for (key in replacement) {
if(typeof result[key] === 'object') {
result[key] = extend(result[key], replacement[key]);
}
else {
result[key] = result[key] || replacement[key];
}
}
}
return result;
}
/**
* UI enhancement for fixed headers.
* Hides header when scrolling down
* Shows header when scrolling up
* @constructor
* @param {DOMElement} elem the header element
* @param {Object} options options for the widget
*/
function Headroom (elem, options) {
options = extend(options, Headroom.options);
this.lastKnownScrollY = 0;
this.elem = elem;
this.debouncer = new Debouncer(this.update.bind(this));
this.tolerance = options.tolerance;
this.classes = options.classes;
this.offset = options.offset;
this.initialised = false;
this.onPin = options.onPin;
this.onUnpin = options.onUnpin;
this.onTop = options.onTop;
this.onNotTop = options.onNotTop;
}
Headroom.prototype = {
constructor : Headroom,
/**
* Initialises the widget
*/
init : function() {
if(!Headroom.cutsTheMustard) {
return;
}
this.elem.classList.add(this.classes.initial);
// defer event registration to handle browser
// potentially restoring previous scroll position
setTimeout(this.attachEvent.bind(this), 100);
return this;
},
/**
* Unattaches events and removes any classes that were added
*/
destroy : function() {
var classes = this.classes;
this.initialised = false;
window.removeEventListener('scroll', this.debouncer, false);
this.elem.classList.remove(classes.unpinned, classes.pinned, classes.top, classes.initial);
},
/**
* Attaches the scroll event
* @private
*/
attachEvent : function() {
if(!this.initialised){
this.lastKnownScrollY = this.getScrollY();
this.initialised = true;
window.addEventListener('scroll', this.debouncer, false);
this.debouncer.handleEvent();
}
},
/**
* Unpins the header if it's currently pinned
*/
unpin : function() {
var classList = this.elem.classList,
classes = this.classes;
if(classList.contains(classes.pinned) || !classList.contains(classes.unpinned)) {
classList.add(classes.unpinned);
classList.remove(classes.pinned);
this.onUnpin && this.onUnpin.call(this);
}
},
/**
* Pins the header if it's currently unpinned
*/
pin : function() {
var classList = this.elem.classList,
classes = this.classes;
if(classList.contains(classes.unpinned)) {
classList.remove(classes.unpinned);
classList.add(classes.pinned);
this.onPin && this.onPin.call(this);
}
},
/**
* Handles the top states
*/
top : function() {
var classList = this.elem.classList,
classes = this.classes;
if(!classList.contains(classes.top)) {
classList.add(classes.top);
classList.remove(classes.notTop);
this.onTop && this.onTop.call(this);
}
},
/**
* Handles the not top state
*/
notTop : function() {
var classList = this.elem.classList,
classes = this.classes;
if(!classList.contains(classes.notTop)) {
classList.add(classes.notTop);
classList.remove(classes.top);
this.onNotTop && this.onNotTop.call(this);
}
},
/**
* Gets the Y scroll position
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
* @return {Number} pixels the page has scrolled along the Y-axis
*/
getScrollY : function() {
return (window.pageYOffset !== undefined)
? window.pageYOffset
: (document.documentElement || document.body.parentNode || document.body).scrollTop;
},
/**
* Gets the height of the viewport
* @see http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
* @return {int} the height of the viewport in pixels
*/
getViewportHeight : function () {
return window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
},
/**
* Gets the height of the document
* @see http://james.padolsey.com/javascript/get-document-height-cross-browser/
* @return {int} the height of the document in pixels
*/
getDocumentHeight : function () {
var body = document.body,
documentElement = document.documentElement;
return Math.max(
body.scrollHeight, documentElement.scrollHeight,
body.offsetHeight, documentElement.offsetHeight,
body.clientHeight, documentElement.clientHeight
);
},
/**
* determines if the scroll position is outside of document boundaries
* @param {int} currentScrollY the current y scroll position
* @return {bool} true if out of bounds, false otherwise
*/
isOutOfBounds : function (currentScrollY) {
var pastTop = currentScrollY < 0,
pastBottom = currentScrollY + this.getViewportHeight() > this.getDocumentHeight();
return pastTop || pastBottom;
},
/**
* determines if the tolerance has been exceeded
* @param {int} currentScrollY the current scroll y position
* @return {bool} true if tolerance exceeded, false otherwise
*/
toleranceExceeded : function (currentScrollY) {
return Math.abs(currentScrollY-this.lastKnownScrollY) >= this.tolerance;
},
/**
* determine if it is appropriate to unpin
* @param {int} currentScrollY the current y scroll position
* @param {bool} toleranceExceeded has the tolerance been exceeded?
* @return {bool} true if should unpin, false otherwise
*/
shouldUnpin : function (currentScrollY, toleranceExceeded) {
var scrollingDown = currentScrollY > this.lastKnownScrollY,
pastOffset = currentScrollY >= this.offset;
return scrollingDown && pastOffset && toleranceExceeded;
},
/**
* determine if it is appropriate to pin
* @param {int} currentScrollY the current y scroll position
* @param {bool} toleranceExceeded has the tolerance been exceeded?
* @return {bool} true if should pin, false otherwise
*/
shouldPin : function (currentScrollY, toleranceExceeded) {
var scrollingUp = currentScrollY < this.lastKnownScrollY,
pastOffset = currentScrollY <= this.offset;
return (scrollingUp && toleranceExceeded) || pastOffset;
},
/**
* Handles updating the state of the widget
*/
update : function() {
var currentScrollY = this.getScrollY(),
toleranceExceeded = this.toleranceExceeded(currentScrollY);
if(this.isOutOfBounds(currentScrollY)) { // Ignore bouncy scrolling in OSX
return;
}
if (currentScrollY <= this.offset ) {
this.top();
} else {
this.notTop();
}
if(this.shouldUnpin(currentScrollY, toleranceExceeded)) {
this.unpin();
}
else if(this.shouldPin(currentScrollY, toleranceExceeded)) {
this.pin();
}
this.lastKnownScrollY = currentScrollY;
}
};
/**
* Default options
* @type {Object}
*/
Headroom.options = {
tolerance : 5,
offset: 50,
classes : {
pinned : 'headroom--pinned',
unpinned : 'headroom--unpinned',
top: 'headroom--top',
notTop: 'headroom--not-top',
initial : 'headroom'
}
};
Headroom.cutsTheMustard = typeof features !== 'undefined' && features.rAF && features.bind && features.classList;
window.Headroom = Headroom;
}(window, document));
/*!
************************************************jQuery.headroom.js************************************************
* headroom.js v0.5.0 - Give your page some headroom. Hide your header until you need it
* Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/headroom.js
* License: MIT
*/
(function($) {
if(!$) {
return;
}
////////////
// Plugin //
////////////
$.fn.headroom = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('headroom'),
options = typeof option === 'object' && option;
options = $.extend(true, {}, Headroom.options, options);
if (!data) {
data = new Headroom(this, options);
data.init();
$this.data('headroom', data);
}
if (typeof option === 'string') {
data[option]();
}
});
};
//////////////
// Data API //
//////////////
$('[data-headroom]').each(function() {
var $this = $(this);
$this.headroom($this.data());
});
}(window.Zepto || window.jQuery));
