https://www.hotelinkonkan.com/assets/js/components/hs.sticky-block.js

1/**
2 * Sticky blocks wrapper.
3 *
4 * @author : Htmlstream
5 * @version : 2.0
6 * @requires : jQuery, jQuery Migrate
7 *
8 */
9;(function ($) {
10  'use strict';
11
12  $.HSCore.components.HSStickyBlock = {
13    /**
14     *
15     *
16     * @var Object _baseConfig
17     */
18    _baseConfig: {},
19
20    /**
21     *
22     *
23     * @var jQuery pageCollection
24     */
25    pageCollection: $(),
26
27    /**
28     * Initialization of Sticky blocks wrapper.
29     *
30     * @param String selector (optional)
31     * @param Object config (optional)
32     *
33     * @return jQuery pageCollection - collection of initialized items.
34     */
35
36    init: function (selector, config) {
37      this.collection = selector && $(selector).length ? $(selector) : $();
38      if (!$(selector).length) return;
39
40      this.config = config && $.isPlainObject(config) ?
41        $.extend({}, this._baseConfig, config) : this._baseConfig;
42
43      this.config.itemSelector = selector;
44
45      this.initStickyBlock();
46
47      return this.pageCollection;
48    },
49
50    initStickyBlock: function () {
51      //Variables
52      var $self = this,
53        collection = $self.pageCollection;
54
55      this.collection.each(function (i, el) {
56        //Variables
57        var $stickyBlock = $(el),
58          stickyBlockHeight = $stickyBlock.outerHeight(),
59          windowOffsetTop = $(window).scrollTop(),
60          windowWidth = window.innerWidth,
61          startPoint = $.isNumeric($stickyBlock.data('start-point')) ? $stickyBlock.data('start-point') : $($stickyBlock.data('start-point')).offset().top,
62          endPoint = $.isNumeric($stickyBlock.data('end-point')) ? $stickyBlock.data('end-point') : $($stickyBlock.data('end-point')).offset().top,
63          $parent = $($stickyBlock.data('parent')),
64          parentWidth = $parent.width(),
65          parentPaddingLeft = parseInt($parent.css('padding-left')),
66          parentOffsetLeft = $parent.offset().left,
67          targetOffset = $stickyBlock.data('offset-target'),
68          targetOffsetHeight = targetOffset ? $(targetOffset).outerHeight() : 0,
69          stickyOffsetTop = $stickyBlock.data('offset-top') ? $stickyBlock.data('offset-top') : 0,
70          stickyOffsetBottom = $stickyBlock.data('offset-bottom') ? $stickyBlock.data('offset-bottom') : 0,
71          stickyView = $stickyBlock.data('sticky-view');
72
73        $self.killSticky($stickyBlock, stickyView, windowWidth);
74
75        if (!$stickyBlock.hasClass('kill-sticky')) {
76          if (windowOffsetTop >= (startPoint - targetOffsetHeight - stickyOffsetTop) && windowOffsetTop <= (endPoint - targetOffsetHeight - stickyOffsetTop)) {
77            $self.addSticky($stickyBlock, parentOffsetLeft, parentWidth, parentPaddingLeft);
78            $self.stickyTop($stickyBlock, stickyOffsetTop, targetOffsetHeight);
79            $self.parentSetHeight($parent, stickyBlockHeight);
80          } else {
81            $self.removeSticky($stickyBlock);
82            $self.parentRemoveHeight($parent);
83          }
84
85          if (windowOffsetTop >= (endPoint - targetOffsetHeight - stickyBlockHeight - stickyOffsetTop - stickyOffsetBottom)) {
86            $self.stickyBottom($stickyBlock, endPoint, windowOffsetTop, stickyBlockHeight, stickyOffsetBottom);
87          }
88        }
89
90        var stickyUpdate = function () {
91          windowOffsetTop = $(window).scrollTop();
92          windowWidth = window.innerWidth;
93          stickyBlockHeight = $stickyBlock.outerHeight();
94          startPoint = $.isNumeric($stickyBlock.data('start-point')) ? $stickyBlock.data('start-point') : $($stickyBlock.data('start-point')).offset().top;
95          endPoint = $.isNumeric($stickyBlock.data('end-point')) ? $stickyBlock.data('end-point') : $($stickyBlock.data('end-point')).offset().top;
96          parentOffsetLeft = $parent.offset().left;
97          parentWidth = $parent.width();
98          parentPaddingLeft = parseInt($parent.css('padding-left'));
99          targetOffsetHeight = targetOffset ? $(targetOffset).outerHeight() : 0;
100
101          $self.killSticky($stickyBlock, stickyView, windowWidth);
102
103          if (!$stickyBlock.hasClass('kill-sticky')) {
104            if (windowOffsetTop >= (startPoint - targetOffsetHeight - stickyOffsetTop) && windowOffsetTop <= (endPoint - targetOffsetHeight - stickyOffsetTop)) {
105              $self.addSticky($stickyBlock, parentOffsetLeft, parentWidth, parentPaddingLeft);
106              $self.stickyTop($stickyBlock, stickyOffsetTop, targetOffsetHeight);
107              $self.parentSetHeight($parent, stickyBlockHeight);
108            } else {
109              $self.removeSticky($stickyBlock);
110              $self.parentRemoveHeight($parent);
111            }
112
113            if (windowOffsetTop >= (endPoint - targetOffsetHeight - stickyBlockHeight - stickyOffsetTop - stickyOffsetBottom)) {
114              $self.stickyBottom($stickyBlock, endPoint, windowOffsetTop, stickyBlockHeight, stickyOffsetBottom);
115            }
116          }
117        };
118
119        $(window).on('scroll', function () {
120          stickyUpdate();
121        });
122
123        $(window).on('resize', function () {
124          stickyUpdate();
125        });
126
127        //Add object to collection
128        collection = collection.add($stickyBlock);
129      });
130    },
131
132    addSticky: function (el, parentOffsetLeft, parentWidth, parentPaddingLeft) {
133      $(el).css({
134        'position': 'fixed',
135        'left': parentOffsetLeft + parentPaddingLeft,
136        'width': parentWidth
137      });
138    },
139
140    stickyTop: function (el, offsetTop, targetOffsetHeight) {
141      $(el).css({
142        'top': offsetTop + targetOffsetHeight
143      });
144    },
145
146    stickyBottom: function (el, endPoint, windowOffsetTop, stickyBlockHeight, offsetBottom) {
147      $(el).css({
148        'top': endPoint - windowOffsetTop - stickyBlockHeight - offsetBottom
149      });
150    },
151
152    removeSticky: function (el) {
153      $(el).css({
154        'position': '',
155        'top': '',
156        'bottom': '',
157        'left': '',
158        'width': ''
159      });
160    },
161
162    killSticky: function (el, stickyView, windowWidth) {
163      //Variables
164      var $self = this,
165        $parent = $(el.data('parent'));
166
167      if (stickyView === 'sm' && windowWidth <= 576) {
168        el.addClass('kill-sticky');
169        $self.removeSticky(el);
170        $self.parentRemoveHeight($parent);
171      } else if (stickyView === 'md' && windowWidth <= 768) {
172        el.addClass('kill-sticky');
173        $self.removeSticky(el);
174        $self.parentRemoveHeight($parent);
175      } else if (stickyView === 'lg' && windowWidth <= 992) {
176        el.addClass('kill-sticky');
177        $self.removeSticky(el);
178        $self.parentRemoveHeight($parent);
179      } else if (stickyView === 'xl' && windowWidth <= 1200) {
180        el.addClass('kill-sticky');
181        $self.removeSticky(el);
182        $self.parentRemoveHeight($parent);
183      } else {
184        el.removeClass('kill-sticky');
185      }
186    },
187
188    parentSetHeight: function (parent, stickyBlockHeight) {
189      parent.css({
190        'height': stickyBlockHeight
191      });
192    },
193
194    parentRemoveHeight: function (parent) {
195      parent.css({
196        'height': ''
197      });
198    }
199  }
200})(jQuery);