62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
|
(function ($) {
|
||
|
|
$(document).ready(function() {
|
||
|
|
|
||
|
|
$.fn.pushpin = function (options) {
|
||
|
|
|
||
|
|
var defaults = {
|
||
|
|
top: 0,
|
||
|
|
bottom: Infinity,
|
||
|
|
offset: 0
|
||
|
|
}
|
||
|
|
options = $.extend(defaults, options);
|
||
|
|
|
||
|
|
$index = 0;
|
||
|
|
return this.each(function() {
|
||
|
|
var $uniqueId = Materialize.guid(),
|
||
|
|
$this = $(this),
|
||
|
|
$original_offset = $(this).offset().top;
|
||
|
|
|
||
|
|
function removePinClasses(object) {
|
||
|
|
object.removeClass('pin-top');
|
||
|
|
object.removeClass('pinned');
|
||
|
|
object.removeClass('pin-bottom');
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateElements(objects, scrolled) {
|
||
|
|
objects.each(function () {
|
||
|
|
// Add position fixed (because its between top and bottom)
|
||
|
|
if (options.top <= scrolled && options.bottom >= scrolled && !$(this).hasClass('pinned')) {
|
||
|
|
removePinClasses($(this));
|
||
|
|
$(this).css('top', options.offset);
|
||
|
|
$(this).addClass('pinned');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add pin-top (when scrolled position is above top)
|
||
|
|
if (scrolled < options.top && !$(this).hasClass('pin-top')) {
|
||
|
|
removePinClasses($(this));
|
||
|
|
$(this).css('top', 0);
|
||
|
|
$(this).addClass('pin-top');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add pin-bottom (when scrolled position is below bottom)
|
||
|
|
if (scrolled > options.bottom && !$(this).hasClass('pin-bottom')) {
|
||
|
|
removePinClasses($(this));
|
||
|
|
$(this).addClass('pin-bottom');
|
||
|
|
$(this).css('top', options.bottom - $original_offset);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
updateElements($this, $(window).scrollTop());
|
||
|
|
$(window).on('scroll.' + $uniqueId, function () {
|
||
|
|
var $scrolled = $(window).scrollTop() + options.offset;
|
||
|
|
updateElements($this, $scrolled);
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
}( jQuery ));
|