geun1416(김지은)
3 years ago
6 changed files with 63 additions and 259 deletions
File diff suppressed because one or more lines are too long
@ -1,225 +0,0 @@ |
|||||||
/** |
|
||||||
* Extend jquery with a scrollspy plugin. |
|
||||||
* This watches the window scroll and fires events when elements are scrolled into viewport. |
|
||||||
* |
|
||||||
* throttle() and getTime() taken from Underscore.js |
|
||||||
* https://github.com/jashkenas/underscore
|
|
||||||
* |
|
||||||
* @author Copyright 2013 John Smart |
|
||||||
* @license https://raw.github.com/thesmart/jquery-scrollspy/master/LICENSE
|
|
||||||
* @see https://github.com/thesmart
|
|
||||||
* @version 0.1.2 |
|
||||||
*/ |
|
||||||
(function($) { |
|
||||||
|
|
||||||
var jWindow = $(window); |
|
||||||
var elements = []; |
|
||||||
var elementsInView = []; |
|
||||||
var isSpying = false; |
|
||||||
var ticks = 0; |
|
||||||
var offset = { |
|
||||||
top : 0, |
|
||||||
right : 0, |
|
||||||
bottom : 0, |
|
||||||
left : 0, |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Find elements that are within the boundary |
|
||||||
* @param {number} top |
|
||||||
* @param {number} right |
|
||||||
* @param {number} bottom |
|
||||||
* @param {number} left |
|
||||||
* @return {jQuery} A collection of elements |
|
||||||
*/ |
|
||||||
function findElements(top, right, bottom, left) { |
|
||||||
var hits = $(); |
|
||||||
$.each(elements, function(i, element) { |
|
||||||
var elTop = element.offset().top, |
|
||||||
elLeft = element.offset().left, |
|
||||||
elRight = elLeft + element.width(), |
|
||||||
elBottom = elTop + element.height(); |
|
||||||
|
|
||||||
var isIntersect = !(elLeft > right || |
|
||||||
elRight < left || |
|
||||||
elTop > bottom || |
|
||||||
elBottom < top); |
|
||||||
|
|
||||||
if (isIntersect) { |
|
||||||
hits.push(element); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
return hits; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Called when the user scrolls the window |
|
||||||
*/ |
|
||||||
function onScroll() { |
|
||||||
// unique tick id
|
|
||||||
++ticks; |
|
||||||
|
|
||||||
// viewport rectangle
|
|
||||||
var top = jWindow.scrollTop(), |
|
||||||
left = jWindow.scrollLeft(), |
|
||||||
right = left + jWindow.width(), |
|
||||||
bottom = top + jWindow.height(); |
|
||||||
|
|
||||||
// determine which elements are in view
|
|
||||||
var intersections = findElements(top+offset.top, right+offset.right, bottom+offset.bottom, left+offset.left); |
|
||||||
$.each(intersections, function(i, element) { |
|
||||||
var lastTick = element.data('scrollSpy:ticks'); |
|
||||||
if (typeof lastTick != 'number') { |
|
||||||
// entered into view
|
|
||||||
element.triggerHandler('scrollSpy:enter'); |
|
||||||
} |
|
||||||
|
|
||||||
// update tick id
|
|
||||||
element.data('scrollSpy:ticks', ticks); |
|
||||||
}); |
|
||||||
|
|
||||||
// determine which elements are no longer in view
|
|
||||||
$.each(elementsInView, function(i, element) { |
|
||||||
var lastTick = element.data('scrollSpy:ticks'); |
|
||||||
if (typeof lastTick == 'number' && lastTick !== ticks) { |
|
||||||
// exited from view
|
|
||||||
element.triggerHandler('scrollSpy:exit'); |
|
||||||
element.data('scrollSpy:ticks', null); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// remember elements in view for next tick
|
|
||||||
elementsInView = intersections; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Called when window is resized |
|
||||||
*/ |
|
||||||
function onWinSize() { |
|
||||||
jWindow.trigger('scrollSpy:winSize'); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Get time in ms |
|
||||||
* @license https://raw.github.com/jashkenas/underscore/master/LICENSE
|
|
||||||
* @type {function} |
|
||||||
* @return {number} |
|
||||||
*/ |
|
||||||
var getTime = (Date.now || function () { |
|
||||||
return new Date().getTime(); |
|
||||||
}); |
|
||||||
|
|
||||||
/** |
|
||||||
* Returns a function, that, when invoked, will only be triggered at most once |
|
||||||
* during a given window of time. Normally, the throttled function will run |
|
||||||
* as much as it can, without ever going more than once per `wait` duration; |
|
||||||
* but if you'd like to disable the execution on the leading edge, pass |
|
||||||
* `{leading: false}`. To disable execution on the trailing edge, ditto. |
|
||||||
* @license https://raw.github.com/jashkenas/underscore/master/LICENSE
|
|
||||||
* @param {function} func |
|
||||||
* @param {number} wait |
|
||||||
* @param {Object=} options |
|
||||||
* @returns {Function} |
|
||||||
*/ |
|
||||||
function throttle(func, wait, options) { |
|
||||||
var context, args, result; |
|
||||||
var timeout = null; |
|
||||||
var previous = 0; |
|
||||||
options || (options = {}); |
|
||||||
var later = function () { |
|
||||||
previous = options.leading === false ? 0 : getTime(); |
|
||||||
timeout = null; |
|
||||||
result = func.apply(context, args); |
|
||||||
context = args = null; |
|
||||||
}; |
|
||||||
return function () { |
|
||||||
var now = getTime(); |
|
||||||
if (!previous && options.leading === false) previous = now; |
|
||||||
var remaining = wait - (now - previous); |
|
||||||
context = this; |
|
||||||
args = arguments; |
|
||||||
if (remaining <= 0) { |
|
||||||
clearTimeout(timeout); |
|
||||||
timeout = null; |
|
||||||
previous = now; |
|
||||||
result = func.apply(context, args); |
|
||||||
context = args = null; |
|
||||||
} else if (!timeout && options.trailing !== false) { |
|
||||||
timeout = setTimeout(later, remaining); |
|
||||||
} |
|
||||||
return result; |
|
||||||
}; |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Enables ScrollSpy using a selector |
|
||||||
* @param {jQuery|string} selector The elements collection, or a selector |
|
||||||
* @param {Object=} options Optional. |
|
||||||
throttle : number -> scrollspy throttling. Default: 100 ms |
|
||||||
offsetTop : number -> offset from top. Default: 0 |
|
||||||
offsetRight : number -> offset from right. Default: 0 |
|
||||||
offsetBottom : number -> offset from bottom. Default: 0 |
|
||||||
offsetLeft : number -> offset from left. Default: 0 |
|
||||||
* @returns {jQuery} |
|
||||||
*/ |
|
||||||
$.scrollSpy = function(selector, options) { |
|
||||||
selector = $(selector); |
|
||||||
selector.each(function(i, element) { |
|
||||||
elements.push($(element)); |
|
||||||
}); |
|
||||||
options = options || { |
|
||||||
throttle: 100 |
|
||||||
}; |
|
||||||
|
|
||||||
offset.top = options.offsetTop || 0; |
|
||||||
offset.right = options.offsetRight || 0; |
|
||||||
offset.bottom = options.offsetBottom || 0; |
|
||||||
offset.left = options.offsetLeft || 0; |
|
||||||
|
|
||||||
var throttledScroll = throttle(onScroll, options.throttle || 100); |
|
||||||
var readyScroll = function(){ |
|
||||||
$(document).ready(throttledScroll); |
|
||||||
}; |
|
||||||
|
|
||||||
if (!isSpying) { |
|
||||||
jWindow.on('scroll', readyScroll); |
|
||||||
jWindow.on('resize', readyScroll); |
|
||||||
isSpying = true; |
|
||||||
} |
|
||||||
|
|
||||||
// perform a scan once, after current execution context, and after dom is ready
|
|
||||||
setTimeout(readyScroll, 0); |
|
||||||
|
|
||||||
return selector; |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Listen for window resize events |
|
||||||
* @param {Object=} options Optional. Set { throttle: number } to change throttling. Default: 100 ms |
|
||||||
* @returns {jQuery} $(window) |
|
||||||
*/ |
|
||||||
$.winSizeSpy = function(options) { |
|
||||||
$.winSizeSpy = function() { return jWindow; }; // lock from multiple calls
|
|
||||||
options = options || { |
|
||||||
throttle: 100 |
|
||||||
}; |
|
||||||
return jWindow.on('resize', throttle(onWinSize, options.throttle || 100)); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Enables ScrollSpy on a collection of elements |
|
||||||
* e.g. $('.scrollSpy').scrollSpy() |
|
||||||
* @param {Object=} options Optional. |
|
||||||
throttle : number -> scrollspy throttling. Default: 100 ms |
|
||||||
offsetTop : number -> offset from top. Default: 0 |
|
||||||
offsetRight : number -> offset from right. Default: 0 |
|
||||||
offsetBottom : number -> offset from bottom. Default: 0 |
|
||||||
offsetLeft : number -> offset from left. Default: 0 |
|
||||||
* @returns {jQuery} |
|
||||||
*/ |
|
||||||
$.fn.scrollSpy = function(options) { |
|
||||||
return $.scrollSpy($(this), options); |
|
||||||
}; |
|
||||||
|
|
||||||
})(jQuery); |
|
||||||
Loading…
Reference in new issue