10 examples of 'jquery sticky header' in JavaScript

10
init_sticky_header() {
11
	if( this.element.find( '.wponion-header-sticky' ).length === 1 ) {
12
		let $this        = this.element.find( '.wponion-header-sticky' ),
13
			$window      = jQuery( window ),
14
			$inner       = $this.find( '.wponion-settings-header-inner' ),
15
			padding      = parseInt( $inner.css( 'padding-left' ) ) + parseInt( $inner.css( 'padding-right' ) ),
16
			offset       = 32,
17
			scrollTop    = 0,
18
			lastTop      = 0,
19
			ticking      = false,
20
			stickyUpdate = function() {
21
				let offsetTop = $this.offset().top,
22
					stickyTop = Math.max( offset, offsetTop - scrollTop ),
23
					winWidth  = Math.max( document.documentElement.clientWidth, window.innerWidth || 0 );
24
25
				if( stickyTop <= offset && winWidth > 782 ) {
26
					$inner.css( { width: $this.outerWidth() - padding } );
27
					$this.css( { height: $this.outerHeight() } ).addClass( 'wponion-settings-header-sticky' );
28
				} else {
29
					$inner.removeAttr( 'style' );
30
					$this.removeAttr( 'style' ).removeClass( 'wponion-settings-header-sticky' );
31
				}
32
33
			},
34
			requestTick  = function() {
35
				if( !ticking ) {
36
					requestAnimationFrame( function() {
37
						stickyUpdate();
38
						ticking = false;
39
					} );
40
				}
41
				ticking = true;
42
43
			},
44
			onSticky     = function() {
45
				scrollTop = $window.scrollTop();
46
				requestTick();
47
48
			};
49
50
		$window.on( 'scroll resize', onSticky );
51
52
		onSticky();
53
	}
54
}

1
function initSubheader(stickyElem, containerElem) {
2
  jQuery(document).ready(function(){
3
    var newStickies = new stickyTitles(stickyElem, containerElem);
4
    newStickies.load();
5
    $(containerElem).on("scroll", function() {
6
      newStickies.scroll();
7
    });
8
  });
9
}

601
function registerStickyHeader(elementId)
602
{
603
  var h = document.getElementById(elementId);
604
  headers.push([
605
      h, h.offsetTop
606
  ]);
607
}

10
function Sticky($target, options) {
11
  var defaults = {
12
    // Minimum viewport width required for sticky positioning to be activated.
13
    minWidth: 1024,
14
    // If there's only 60px below the target for it to move into, why bother?
15
    threshold: 60,
16
    // Viewport offset to add to the top of the target element.
17
    offset: 0,
18
    // The element that gets stuck.
19
    sticky: ".js-sticky"
20
  };
21
22
  this.options = $.extend({}, defaults, options);
23
24
  this.$target = $target;
25
  this.$parent = $target.offsetParent();
26
  this.$sticky = $target.find(this.options.sticky);
27
28
  this.init();
29
}

11
function stickyTitles(stickyElem, containerElem) {
12
  var stickies = jQuery(stickyElem);
13
  var container = jQuery(containerElem);
14
  container.addClass("subheader-container");
15
16
  /** Added top holder component **/
17
  var topHolder = document.createElement("div");
18
  $(topHolder).addClass("top_holder");
19
  container.prepend(topHolder);
20
21
  this.load = function() {
22
    stickies.each(function() {
23
      var thisSticky = jQuery(this).wrap('<div>');
24
      thisSticky.parent().height(thisSticky.outerHeight());
25
26
      jQuery.data(thisSticky[0], 'pos', thisSticky.position().top);
27
    });
28
  };
29
30
  this.scroll = function() {
31
    $(topHolder).css('top',  container.scrollTop());
32
    $(topHolder).addClass("z-depth-1");
33
    stickies.each(function(i) {
34
      var thisSticky = jQuery(this),
35
          nextSticky = stickies.eq(i+1),
36
          prevSticky = stickies.eq(i-1),
37
          pos = jQuery.data(thisSticky[0], 'pos');
38
39
      if(container.scrollTop() == 0) {
40
        $(topHolder).hide();
41
      } else {
42
        $(topHolder).show();
43
      }
44
45
      if (pos &lt;= container.scrollTop()) {
46
        $(topHolder).html('');
47
        thisSticky.clone().appendTo($(topHolder));
48
      } else {
49
        thisSticky.removeAttr('style').show();
50
        if (prevSticky.length &gt; 0 &amp;&amp; container.offset().top &lt;= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
51
          prevSticky.removeClass("absolute").removeAttr("style");
52
        }
53
      }
54
    });
55
  }
56
}</div>

17
function stickyHeader(e) {
18
  $vendorHeaders.toggleClass('sticky', $window.scrollTop() > vendorsTop);
19
  $vendorHeadersBackground.toggleClass('sticky', $window.scrollTop() > vendorsTop);
20
}

288
get uiOverlap() {
289
  return this._getUiOverlap;
290
}

163
function Sticky(element, options) {
164
    EventEmitter.call(this);
165
    this.element = typeof element === "string" ? document.querySelector(element) : element;
166
    this.options = util.extend({}, this.constructor.defaultOptions, options)
167
    this.init();
168
}

229
refreshStickyHeader(offsetY = this.offsetY) {
230
    offsetY = offsetY - this.staticSectionHeight;
231
    const title = this.getCurrentTitle(offsetY),
232
        offset = this.getCurrentTitleOffsetY(offsetY),
233
        groupKey = title ? this.getAttr(title, 'groupKey') : null;
234
235
    if (this.currentGroup.offset !== offset || this.currentGroup.key !== groupKey) {
236
        this.currentGroup = { key: groupKey, offset };
237
        this.stickyHeader = {
238
            title,
239
            offset
240
        };
241
242
        this.emitEvent('refreshStickyHeader', this.stickyHeader);
243
    }
244
}

247
return function sticky(el, top) {
248
249
  var requiredOriginalStyles = ['position', 'top', 'left', 'z-index'];
250
251
  var requiredTop = top || 0;
252
  var originalRect = calcRect(el);
253
  var styles = {
254
    position: 'fixed',
255
    top: requiredTop + 'px',
256
    left: originalRect.left + 'px',
257
    // width: originalRect.width + 'px',
258
    'z-index': 9999
259
  }
260
  var originalStyles = {}
261
  requiredOriginalStyles.forEach(function(key) {
262
    originalStyles[key] = el.style[key];
263
  });
264
265
  var onscroll;
266
  if (window.onscroll) {
267
    onscroll = window.onscroll;
268
  }
269
  
270
  window.onscroll = function(event) {
271
    if (getWindowScroll().top > originalRect.top - requiredTop) {
272
      for (key in styles) {
273
        el.style[key] = styles[key];
274
      }
275
      el.className = 'stuck'
276
      document.body.className = 'el-stuck'
277
    } else {
278
      for (key in originalStyles) {
279
        el.style[key] = originalStyles[key];
280
      }
281
      el.className = 'not-stuck'
282
      document.body.className = 'el-not-stuck'
283
    }
284
    onscroll && onscroll(event)
285
  }
286
}