<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
<div class="row">
<h2>
<div class="nav-container">
<nav id="nav">
<ul>
<li><a href="#section1">First</a></li>
<li><a href="#section2">Second</a></li>
</ul>
<p id="test"></p>
</nav>
</div>
<section id="section1">This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
</section>
<section id="section2">This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.</section>
<section id="section3">This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.</section>
<section id="section3">This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.
This time we’re using an offset expressed as a percentage of the window’s height.
Effectively, this means that the imaginary line that tells our script what section is currently being viewed
is placed about a third from the top of the viewport — right about where the viewer would be looking at when
reading a long text. A more robust solution could use a function to adapt to changes in the navigation bar’s height.</section>
</h2>
</div>
</div>
nav {
position: relative;
width: 928px;
padding: 2em;
margin-left: -14px;
border-top-left-radius: 14px 7px;
border-top-right-radius: 14px 7px;
background:#F0F0F0;
}
.sticky {
position: fixed;
top: 0;
}
nav li {
display: inline-block;
list-style: none;
}
nav-container {
width:900px;
}
(function() {
'use strict'
var keyCounter = 0
var allWaypoints = {}
/* http://imakewebthings.com/waypoints/api/waypoint */
function Waypoint(options) {
if (!options) {
throw new Error('No options passed to Waypoint constructor')
}
if (!options.element) {
throw new Error('No element option passed to Waypoint constructor')
}
if (!options.handler) {
throw new Error('No handler option passed to Waypoint constructor')
}
this.key = 'waypoint-' + keyCounter
this.options = Waypoint.Adapter.extend({}, Waypoint.defaults, options)
this.element = this.options.element
this.adapter = new Waypoint.Adapter(this.element)
this.callback = options.handler
this.axis = this.options.horizontal ? 'horizontal' : 'vertical'
this.enabled = this.options.enabled
this.triggerPoint = null
this.group = Waypoint.Group.findOrCreate({
name: this.options.group,
axis: this.axis
})
this.context = Waypoint.Context.findOrCreateByElement(this.options.context)
if (Waypoint.offsetAliases[this.options.offset]) {
this.options.offset = Waypoint.offsetAliases[this.options.offset]
}
this.group.add(this)
this.context.add(this)
allWaypoints[this.key] = this
keyCounter += 1
}
/* Private */
Waypoint.prototype.queueTrigger = function(direction) {
this.group.queueTrigger(this, direction)
}
/* Private */
Waypoint.prototype.trigger = function(args) {
if (!this.enabled) {
return
}
if (this.callback) {
this.callback.apply(this, args)
}
}
/* Public */
/* http://imakewebthings.com/waypoints/api/destroy */
Waypoint.prototype.destroy = function() {
this.context.remove(this)
this.group.remove(this)
delete allWaypoints[this.key]
}
/* Public */
/* http://imakewebthings.com/waypoints/api/disable */
Waypoint.prototype.disable = function() {
this.enabled = false
return this
}
/* Public */
/* http://imakewebthings.com/waypoints/api/enable */
Waypoint.prototype.enable = function() {
this.context.refresh()
this.enabled = true
return this
}
/* Public */
/* http://imakewebthings.com/waypoints/api/next */
Waypoint.prototype.next = function() {
return this.group.next(this)
}
/* Public */
/* http://imakewebthings.com/waypoints/api/previous */
Waypoint.prototype.previous = function() {
return this.group.previous(this)
}
/* Public */
/* http://imakewebthings.com/waypoints/api/destroy-all */
Waypoint.destroyAll = function() {
var allWaypointsArray = []
for (var waypointKey in allWaypoints) {
allWaypointsArray.push(allWaypoints[waypointKey])
}
for (var i = 0, end = allWaypointsArray.length; i < end; i++) {
allWaypointsArray[i].destroy()
}
}
/* Public */
/* http://imakewebthings.com/waypoints/api/refresh-all */
Waypoint.refreshAll = function() {
Waypoint.Context.refreshAll()
}
/* Public */
/* http://imakewebthings.com/waypoints/api/viewport-height */
Waypoint.viewportHeight = function() {
return window.innerHeight || document.documentElement.clientHeight
}
/* Public */
/* http://imakewebthings.com/waypoints/api/viewport-width */
Waypoint.viewportWidth = function() {
return document.documentElement.clientWidth
}
Waypoint.adapters = []
Waypoint.defaults = {
context: window,
continuous: true,
enabled: true,
group: 'default',
horizontal: false,
offset: 0
}
Waypoint.offsetAliases = {
'bottom-in-view': function() {
return this.context.innerHeight() - this.adapter.outerHeight()
},
'right-in-view': function() {
return this.context.innerWidth() - this.adapter.outerWidth()
}
}
window.Waypoint = Waypoint
}());
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("#nav");
nav_container.Waypoint({
handler: function(direction) {
nav.toggleClass('sticky', direction=='down');
}
});
});
var section1 = new Waypoint({
element: document.getElementById('section1'),
handler: function(direction) {
("#test").html("section1");
}
});
