https://funmunch.com/theme/zblog/js/jquery.stickybox.js

1/**
2 * Stickybox plugin for jQuery.
3 *
4 * @copyright  Copyright (c) 2017 Jörg Moldenhauer
5 * @author     Jörg Moldenhauer
6 * @license    https://opensource.org/licenses/lgpl-3.0.html LGPL-3.0
7 *
8 * @link       https://github.com/joergmoldenhauer/jquery-stickybox
9 */
10
11(function($) {
12    jQuery.fn.stickyBox = function(options) {
13        // Set default configuration and extend it with given options
14        var defaults = {
15            notStickyBreakpoint: 767, // From this point on and below, boxes are not sticky
16            spaceTop: 20, // Space between window top and boxes
17            stoppper: false, // False or elements which stop the boxes (jQuery selektor e.g. '#footer' or '.sticky-box-stopper')
18            stopperSpace: 20 // Space between stopper elements and boxes
19        };
20        var config = $.extend(defaults, options);
21
22        // If display is smaller than defined breakpoint, do nothing
23        if ($(window).innerWidth() <= config.notStickyBreakpoint) {
24            return this;
25        }
26
27        // Get stopper (if set in options)
28        var stopper;
29        if (config.stopper !== false) {
30            stopper = $(config.stopper).first();
31        }
32
33        // Make every element of the collection sticky
34        return this.each(function() {
35            // Get current element
36            var box = $(this);
37
38            // Save box style (for resetting box)
39            box.initialStyle = box.attr('style');
40
41            // Save box previous element and parent (for resetting box)
42            box.parentElement = box.parent();
43
44            // Set box already stopped flag (will be set to true when box is already below stopper element)
45            box.alreadyStopped = false;
46
47            // Set box properties and assign resize listener
48            setBoxProperties(box);
49            $(window).on('resize', function() {
50                setBoxProperties(box);
51                setBoxPosition(box);
52            });
53
54            // Set box position and assign scroll listener
55            setBoxPosition(box);
56            $(window).on('scroll', function() {
57                setBoxPosition(box);
58            });
59        });
60
61        /**
62         * Sets properties of a given box based on the values when the box is not fixed
63         */
64        function setBoxProperties(box) {
65            // Reset box
66            resetBox(box);
67
68            // Get values
69            var offsetTop = box.offset().top;
70            var offsetLeft = box.offset().left;
71            var boxSizing = box.css('box-sizing');
72            var width;
73            if (boxSizing == 'border-box') {
74                width = box.outerWidth();
75            } else {
76                width = box.width();
77            }
78
79            // Set box properties
80            box.intialOffsetTop = offsetTop;
81            box.intialOffsetLeft = offsetLeft;
82            box.initialWidth = width;
83        }
84
85        /**
86         * Positions a given box according to scroll level
87         */
88        function setBoxPosition(box) {
89            // Check if box should be sticky or stopped
90            if (!box.alreadyStopped && (($(window).scrollTop() >= box.intialOffsetTop - config.spaceTop) || (box.stopPosition !== undefined && $(window).scrollTop() >= box.stopPosition))) {
91                // Set box parent container position relative
92                // @todo: reset when box is not sticky anymore
93                box.parentElement.css({
94                    position: 'relative'
95                });
96
97                // Set css values for fixed state
98                var position = 'fixed';
99                var top = config.spaceTop;
100
101                // Check if box should be stopped and set css styles accordingly
102                if (box.stopPosition !== undefined && $(window).scrollTop() >= box.stopPosition) {
103                    position = 'absolute';
104                    top = box.stopPosition + config.spaceTop - box.parentElement.offset().top;
105                }
106
107                // Aply css styles
108                box.css({
109                    position: position,
110                    top: top,
111                    marginTop: 0,
112                    width: box.initialWidth
113                });
114            } else {
115                resetBox(box);
116            }
117        }
118
119        /**
120         * Resets a box to the state before it was sticky
121         */
122        function resetBox(box) {
123            // Reset initial style or remove style-attribute completly
124            if (box.initialStyle !== undefined) {
125                box.attr('style', box.initialStyle);
126            } else {
127                box.removeAttr('style');
128            }
129
130            // Set box stop position (or set already stopped flag)
131            if (config.stopper !== false && stopper.length > 0) {
132                var stopperTop = stopper.offset().top;
133                if (stopperTop > box.offset().top + box.outerHeight() + config.stopperSpace) {
134                    box.alreadyStopped = false;

135                    box.stopPosition = stopperTop - (config.spaceTop + box.outerHeight() + config.stopperSpace);
136                } else {
137                    box.alreadyStopped = true;
138                }
139            }
140        }
141    };
142})(jQuery);