1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
/*
* jQuery Foundation Magellan 0.1.0
* http://foundation.zurb.com
* Copyright 2012, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/*jslint unparam: true, browser: true, indent: 2 */
;(function ($, window, undefined) {
'use strict';
$.fn.foundationMagellan = function(options) {
var $window = $(window),
$document = $(document),
$fixedMagellan = $('[data-magellan-expedition=fixed]'),
defaults = {
threshold: ($fixedMagellan.length) ? $fixedMagellan.outerHeight(true) : 0,
activeClass: 'active'
},
options = $.extend({}, defaults, options);
// Indicate we have arrived at a destination
$document.on('magellan.arrival', '[data-magellan-arrival]', function(e) {
var $destination = $(this),
$expedition = $destination.closest('[data-magellan-expedition]'),
activeClass = $expedition.attr('data-magellan-active-class') || options.activeClass;
$destination
.closest('[data-magellan-expedition]')
.find('[data-magellan-arrival]')
.not(this)
.removeClass(activeClass);
$destination.addClass(activeClass);
});
// Set starting point as the current destination
var $expedition = $('[data-magellan-expedition]');
$expedition.find('[data-magellan-arrival]:first')
.addClass($expedition.attr('data-magellan-active-class') || options.activeClass);
// Update fixed position
$fixedMagellan.on('magellan.update-position', function(){
var $el = $(this);
$el.data("magellan-fixed-position","");
$el.data("magellan-top-offset", "");
})
.trigger('magellan.update-position');
$window.on('resize.magellan', function() {
$fixedMagellan.trigger('magellan.update-position');
});
$window.on('scroll.magellan', function() {
var windowScrollTop = $window.scrollTop();
$fixedMagellan.each(function() {
var $expedition = $(this);
if ($expedition.data("magellan-top-offset") === "") {
$expedition.data("magellan-top-offset", $expedition.offset().top);
}
var fixed_position = (windowScrollTop + options.threshold) > $expedition.data("magellan-top-offset");
if ($expedition.data("magellan-fixed-position") != fixed_position) {
$expedition.data("magellan-fixed-position", fixed_position);
if (fixed_position) {
$expedition.css({position:"fixed", top:0});
} else {
$expedition.css({position:"", top:""});
}
}
});
});
// Determine when a destination has been reached, ah0y!
var $lastDestination = $('[data-magellan-destination]:last');
// Determine if a destination has been set
if ($lastDestination.length > 0) {
$window.on('scroll.magellan', function (e) {
var windowScrollTop = $window.scrollTop(),
scrolltopPlusHeight = windowScrollTop + $window.outerHeight(true),
lastDestinationTop = Math.ceil($lastDestination.offset().top);
$('[data-magellan-destination]').each(function () {
var $destination = $(this),
destination_name = $destination.attr('data-magellan-destination'),
topOffset = $destination.offset().top - windowScrollTop;
if (topOffset <= options.threshold) {
$('[data-magellan-arrival=' + destination_name + ']').trigger('magellan.arrival');
}
// In large screens we may hit the bottom of the page and dont reach the top of the last magellan-destination, so lets force it
if (scrolltopPlusHeight >= $document.outerHeight(true) && lastDestinationTop > windowScrollTop && lastDestinationTop < scrolltopPlusHeight) {
$('[data-magellan-arrival]:last').trigger('magellan.arrival');
}
});
});
}
};
}(jQuery, this));
|
