https://renardsdumanet.fr/templates/templatelrm001/js/topfixedwrapper.js

1/**
2 * @name		Top Fixed Wrapper Widget for Template Creator CK
3 * @copyright	Copyright (C) 2016. All rights reserved.
4 * @license		GNU General Public License version 2 or later; see LICENSE.txt
5 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
6 */
7
8(function($) {
9	var TCK_TopFixedWrapper = function(container, options) {
10		var defaults = {
11			zIndex: '1000',				// position the fixed element
12			offset: '',			// distance or element after what to make it float
13			effect: '0',				// fade effect to apply when it becomes fixed
14			resolution: '0'			// value in px to restrict the behavior for low resolution
15		};
16
17		var opts = $.extend(defaults, options);
18		var els = $(container);
19		var $window = $(window);
20		// check the resolution to disable the floating
21		var doFloating = true;
22
23		els.each(function(options) {
24			var el = $(this);
25			el.inner = el.find('> .inner');
26			floatElement(el);
27			el.data('top', el.offset().top);
28			el.data('istopfixed', false);
29			el.data('isanimating', false);
30			$window.bind('scroll load resize', function() { floatElement(el); });
31		});
32
33		function floatElement(el) {
34			checkDofloating();
35			var winY = $window.scrollTop();
36			var offset = el.data('top');
37			if (opts.offset) {
38				if (isNumeric(opts.offset)) {
39					offset = offset + parseInt(opts.offset);
40				} else {
41					offset = parseInt($(opts.offset).offset().top);
42				}
43			}
44
45			if (winY > offset && !el.data('istopfixed') && !el.data('isanimating') && doFloating) {
46				var modtmp = $('#'+el.attr('id')+'tmp');
47				modtmp.remove();
48				el.after('<div id="' + el.attr('id') + 'tmp"></div>');
49				$('#'+el.attr('id')+'tmp').css('visibility', 'hidden').height(el.height());
50				if (opts.effect == '1') el.css({opacity: '0'});
51				el.css({position: 'fixed', zIndex: opts.zIndex, marginTop: '0px', top: '0px',  left: '0', right: '0'})
52					.data('istopfixed', true)
53					.addClass('istopfixed');
54				addContainerClass(el);
55				if (opts.effect == '1') el.animate({opacity: '1'}, 400);
56			} else if (offset >= winY && el.data('istopfixed') || (!doFloating && $('#'+el.attr('id')+'tmp').length)) {
57				var modtmp = $('#'+el.attr('id')+'tmp');
58				if (opts.effect == '1' && opts.offset)  {
59					el.data('istopfixed', false);
60					el.data('isanimating', true);
61					el.animate({opacity: '0'}, 400, function() { el.css({position: '', marginTop: '', opacity: '1'}).data('istopfixed', false).data('isanimating', false).removeClass('istopfixed');modtmp.remove();removeContainerClass(el); });
62				} else {
63					removeContainerClass(el)
64					el.css({position: '', marginTop: ''}).data('istopfixed', false).removeClass('istopfixed');
65					modtmp.remove();
66				}
67			}
68		}
69
70		function addContainerClass(el) {
71			var parentWrapper = $(el.parents('.tck-wrapper')[0]);
72			if ( (parentWrapper.find('> .inner').hasClass('tck-container-fluid')
73					|| parentWrapper.find('> .inner').hasClass('tck-container'))
74				&& el.inner.length && el[0].tagName.toLowerCase() == 'section' && !el.inner.hasClass('tck-container-fluid') && !el.inner.hasClass('tck-container')) {
75				el.inner.addClass('tck-container-fluid').attr('data-topfixedinfos','row');
76				el.inner.attr('data-topfixedinfos','row');
77			} else {
78				el.inner.attr('data-topfixedinfos','wrapper');
79			}
80		}
81
82		function removeContainerClass(el) {
83			if (el.inner.length && el.inner.attr('data-topfixedinfos') == 'row') el.inner.removeClass('tck-container-fluid');
84		}
85
86		function checkDofloating() {
87			if ($window.width() <= opts.resolution) {
88				doFloating = false;
89			} else {
90				doFloating = true;
91			}
92		}
93
94		function isNumeric(n) {
95			return !isNaN(parseFloat(n)) && isFinite(n);
96		}
97	};
98	window.TCK_TopFixedWrapper = TCK_TopFixedWrapper;
99})(jQuery);