https://valenciagastronomica.com/wp-content/themes/fox/js56/theia-sticky-sidebar.js?ver=1.3.1

1/*!
2 * Theia Sticky Sidebar v1.3.1
3 * https://github.com/WeCodePixels/theia-sticky-sidebar
4 *
5 * Glues your website's sidebars, making them permanently visible while scrolling.
6 *
7 * Copyright 2013-2016 WeCodePixels and other contributors
8 * Released under the MIT license
9 */
10
11(function ($) {
12	$.fn.theiaStickySidebar = function (options) {
13		var defaults = {
14			'containerSelector': '',
15			'additionalMarginTop': 0,
16			'additionalMarginBottom': 0,
17			'updateSidebarHeight': true,
18			'minWidth': 0,
19			'disableOnResponsiveLayouts': true,
20			'sidebarBehavior': 'modern'
21		};
22		options = $.extend(defaults, options);
23
24		// Validate options
25		options.additionalMarginTop = parseInt(options.additionalMarginTop) || 0;
26		options.additionalMarginBottom = parseInt(options.additionalMarginBottom) || 0;
27
28		tryInitOrHookIntoEvents(options, this);
29
30		// Try doing init, otherwise hook into window.resize and document.scroll and try again then.
31		function tryInitOrHookIntoEvents(options, $that) {
32			var success = tryInit(options, $that);
33
34			if (!success) {
35				console.log('TST: Body width smaller than options.minWidth. Init is delayed.');
36
37				$(document).scroll(function (options, $that) {
38					return function (evt) {
39						var success = tryInit(options, $that);
40
41						if (success) {
42							$(this).unbind(evt);
43						}
44					};
45				}(options, $that));
46				$(window).resize(function (options, $that) {
47					return function (evt) {
48						var success = tryInit(options, $that);
49
50						if (success) {
51							$(this).unbind(evt);
52						}
53					};
54				}(options, $that))
55			}
56		}
57
58		// Try doing init if proper conditions are met.
59		function tryInit(options, $that) {
60			if (options.initialized === true) {
61				return true;
62			}
63
64			if ($('body').width() < options.minWidth) {
65				return false;
66			}
67
68			init(options, $that);
69
70			return true;
71		}
72
73		// Init the sticky sidebar(s).
74		function init(options, $that) {
75			options.initialized = true;
76
77			// Add CSS
78			$('head').append($('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>'));
79
80			$that.each(function () {
81				var o = {};
82
83				o.sidebar = $(this);
84
85				// Save options
86				o.options = options || {};
87
88				// Get container
89				o.container = $(o.options.containerSelector);
90				if (o.container.length == 0) {
91					o.container = o.sidebar.parent();
92				}
93
94				// Create sticky sidebar
95				o.sidebar.parents().css('-webkit-transform', 'none'); // Fix for WebKit bug - https://code.google.com/p/chromium/issues/detail?id=20574
96				o.sidebar.css({
97					'position': 'relative',
98					'overflow': 'visible',
99					// The "box-sizing" must be set to "content-box" because we set a fixed height to this element when the sticky 

99sidebar has a fixed position.
100					'-webkit-box-sizing': 'border-box',
101					'-moz-box-sizing': 'border-box',
102					'box-sizing': 'border-box'
103				});
104
105				// Get the sticky sidebar element. If none has been found, then create one.
106				o.stickySidebar = o.sidebar.find('.theiaStickySidebar');
107				if (o.stickySidebar.length == 0) {
108					o.sidebar.find('script').remove(); // Remove <script> tags, otherwise they will be run again on the next line.
109					o.stickySidebar = $('<div>').addClass('theiaStickySidebar').append(o.sidebar.children());
110					o.sidebar.append(o.stickySidebar);
111				}
112
113				// Get existing top and bottom margins and paddings
114				o.marginTop = parseInt(o.sidebar.css('margin-top'));
115				o.marginBottom = parseInt(o.sidebar.css('margin-bottom'));
116				o.paddingTop = parseInt(o.sidebar.css('padding-top'));
117				o.paddingBottom = parseInt(o.sidebar.css('padding-bottom'));
118
119				// Add a temporary padding rule to check for collapsable margins.
120				var collapsedTopHeight = o.stickySidebar.offset().top;
121				var collapsedBottomHeight = o.stickySidebar.outerHeight();
122				o.stickySidebar.css('padding-top', 1);
123				o.stickySidebar.css('padding-bottom', 1);
124				collapsedTopHeight -= o.stickySidebar.offset().top;
125				collapsedBottomHeight = o.stickySidebar.outerHeight() - collapsedBottomHeight - collapsedTopHeight;
126				if (collapsedTopHeight == 0) {
127					o.stickySidebar.css('padding-top', 0);
128					o.stickySidebarPaddingTop = 0;
129				}
130				else {
131					o.stickySidebarPaddingTop = 1;
132				}
133
134				if (collapsedBottomHeight == 0) {
135					o.stickySidebar.css('padding-bottom', 0);
136					o.stickySidebarPaddingBottom = 0;
137				}
138				else {
139					o.stickySidebarPaddingBottom = 1;
140				}
141
142				// We use this to know whether the user is scrolling up or down.
143				o.previousScrollTop = null;
144
145				// Scroll top (value) when the sidebar has fixed position.
146				o.fixedScrollTop = 0;
147
148				// Set sidebar to default values.
149				resetSidebar();
150
151				o.onScroll = function (o) {
152					// Stop if the sidebar isn't visible.
153					if (!o.stickySidebar.is(":visible")) {
154						return;
155					}
156
157					// Stop if the window is too small.
158					if ($('body').width() < o.options.minWidth) {
159						resetSidebar();
160						return;
161					}
162
163					// Stop if the sidebar width is larger than the container width (e.g. the theme is responsive and the sidebar is now below the content)
164					if (o.options.disableOnResponsiveLayouts) {
165						if (o.sidebar.outerWidth(true) + 50 > o.container.width()) {
166							resetSidebar();
167							return;
168						}
169					}
170
171					var scrollTop = $(document).scrollTop();
172					var position = 'static';
173
174					// If the user has scrolled down enough for the sidebar to be clipped at the top, then we can consider changing its position.
175					if (scrollTop >= o.container.offset().top + (o.paddingTop + o.marginTop - o.options.additionalMarginTop)) {
176						// The top and bottom offsets, used in various calculations.
177						var offsetTop = o.paddingTop + o.marginTop + options.additionalMarginTop;
178						var offsetBottom = o.paddingBottom + o.marginBottom + options.additionalMarginBottom;
179
180						// All top and bottom positions are relative to the window, not to the parent elemnts.
181						var containerTop = o.container.offset().top;
182						var containerBottom = o.container.offset().top + getClearedHeight(o.container);
183
184						// The top and bottom offsets relative to the window screen top (zero) and bottom (window height).
185						var windowOffsetTop = 0 + options.additionalMarginTop;
186						var windowOffsetBottom;
187
188						var sidebarSmallerThanWindow = (o.stickySidebar.outerHeight() + offsetTop + offsetBottom) < $(window).height();
189						if (sidebarSmallerThanWindow) {
190							windowOffsetBottom = windowOffsetTop + o.stickySidebar.outerHeight();
191						}
192						else {
193							windowOffsetBottom = $(window).height() - o.marginBottom - o.paddingBottom - options.additionalMarginBottom;
194						}
195
196						var staticLimitTop = containerTop - scrollTop + o.paddingTop + o.marginTop;
197						var staticLimitBottom = containerBottom - scrollTop - o.paddingBottom - o.marginBottom;
198
199						var top = o.stickySidebar.offset().top - scrollTop;
200						var scrollTopDiff = o.previousScrollTop - scrollTop;
201
202						// If the sidebar position is fixed, then it won't move up or down by itself. So, we manually adjust the top coordinate.
203						if (o.stickySidebar.css('position') == 'fixed') {
204							if (o.options.sidebarBehavior == 'modern') {
205								top += scrollTopDiff;
206							}
207						}
208
209						if (o.options.sidebarBehavior == 'legacy') {
210							top = windowOffsetBottom - o.stickySidebar.outerHeight();
211							top = Math.max(top, windowOffsetBottom - o.stickySidebar.outerHeight());
212						}
213
214						if (scrollTopDiff > 0) { // If the user is scrolling up.
215							top = Math.min(top, windowOffsetTop);
216						}
217						else { // If the user is scrolling down.
218							top = Math.max(top, windowOffsetBottom - o.stickySidebar.outerHeight());
219						}
220
221						top = Math.max(top, staticLimitTop);
222
223						top = Math.min(top, staticLimitBottom - o.stickySidebar.outerHeight());
224
225						// If the sidebar is the same height as the container, we won't use fixed positioning.
226						var sidebarSameHeightAsContainer = o.container.height() == o.stickySidebar.outerHeight();
227
228						if (!sidebarSameHeightAsContainer && top == windowOffsetTop) {
229							position = 'fixed';
230						}
231						else if (!sidebarSameHeightAsContainer && top == windowOffsetBottom - o.stickySidebar.outerHeight()) {
232							position = 'fixed';
233						}
234						else if (scrollTop + top - o.sidebar.offset().top - o.paddingTop <= options.additionalMarginTop) {
235							// Stuck to the top of the page. No special behavior.
236							position = 'static';
237						}
238						else {
239							// Stuck to the bottom of the page.
240							position = 'absolute';
241						}
242					}
243
244					/*

245					 * Performance notice: It's OK to set these CSS values at each resize/scroll, even if they don't change.
246					 * It's way slower to first check if the values have changed.
247					 */
248					if (position == 'fixed') {
249						o.stickySidebar.css({
250							'position': 'fixed',
251							'width': o.sidebar.width(),
252							'top': top,
253							'left': o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left'))
254						});
255					}
256					else if (position == 'absolute') {
257						var css = {};
258
259						if (o.stickySidebar.css('position') != 'absolute') {
260							css.position = 'absolute';
261							css.top = scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom;
262						}
263
264						css.width = o.sidebar.width();
265						css.left = '';
266
267						o.stickySidebar.css(css);
268					}
269					else if (position == 'static') {
270						resetSidebar();
271					}
272
273					if (position != 'static') {
274						if (o.options.updateSidebarHeight == true) {
275							o.sidebar.css({
276								'min-height': o.stickySidebar.outerHeight() + o.stickySidebar.offset().top - o.sidebar.offset().top + o.paddingBottom
277							});
278						}
279					}
280
281					o.previousScrollTop = scrollTop;
282				};
283
284				// Initialize the sidebar's position.
285				o.onScroll(o);
286
287				// Recalculate the sidebar's position on every scroll and resize.
288				$(document).scroll(function (o) {
289					return function () {
290						o.onScroll(o);
291					};
292				}(o));
293				$(window).resize(function (o) {
294					return function () {
295						o.stickySidebar.css({'position': 'static'});
296						o.onScroll(o);
297					};
298				}(o));
299
300				// Reset the sidebar to its default state
301				function resetSidebar() {
302					o.fixedScrollTop = 0;
303					o.sidebar.css({
304						'min-height': '1px'
305					});
306					o.stickySidebar.css({
307						'position': 'static',
308						'width': ''
309					});
310				}
311
312				// Get the height of a div as if its floated children were cleared. Note that this function fails if the floats are more than one level deep.
313				function getClearedHeight(e) {
314					var height = e.height();
315
316					e.children().each(function () {
317						height = Math.max(height, $(this).height());
318					});
319
320					return height;
321				}
322			});
323		}
324	}
325})(jQuery);