10 examples of 'jquery sticky header' in JavaScript

Every line of 'jquery sticky header' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
10init_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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

1function 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}
601function registerStickyHeader(elementId)
602{
603 var h = document.getElementById(elementId);
604 headers.push([
605 h, h.offsetTop
606 ]);
607}
10function 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}
11function 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 class="followWrap" />');
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 <= container.scrollTop()) {
46 $(topHolder).html('');
47 thisSticky.clone().appendTo($(topHolder));
48 } else {
49 thisSticky.removeAttr('style').show();
50 if (prevSticky.length > 0 && container.offset().top <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
51 prevSticky.removeClass("absolute").removeAttr("style");
52 }
53 }
54 });
55 }
56}
17function stickyHeader(e) {
18 $vendorHeaders.toggleClass('sticky', $window.scrollTop() > vendorsTop);
19 $vendorHeadersBackground.toggleClass('sticky', $window.scrollTop() > vendorsTop);
20}
288get uiOverlap() {
289 return this._getUiOverlap;
290}
163function 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}
229refreshStickyHeader(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}
247return 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}

Related snippets