10 examples of 'smooth sticky header on scroll jquery' in JavaScript

181
var onScroll = autoCurry(function onScroll_(stickyElement, scrollY) {
182
  if (!stickyElement.fixed) { return; }
183
184
  if (scrollY < 0) {
185
    scrollY = 0;
186
  }
187
188
  var newTop = scrollY + evaluateOption(stickyElement, stickyElement.marginTop) - stickyElement.containerTop;
189
  var maxTop = stickyElement.containerHeight - stickyElement.elemHeight - evaluateOption(stickyElement, stickyElement.marginBottom);
190
191
  if (stickyElement.useTransform) {
192
    maxTop -= stickyElement.originalTop;
193
  } else {
194
    newTop += stickyElement.originalTop;
195
  }
196
197
  newTop = Math.max(0, Math.min(newTop, maxTop));
198
199
  if (stickyElement.currentTop !== newTop) {
200
201
    if (stickyElement.positionType !== 'fixed') {
202
      if (stickyElement.useTransform) {
203
        setStyle(stickyElement.elem, 'transform', 'translate3d(0, ' + newTop + 'px, 0)');
204
      } else {
205
        setStyle(stickyElement.elem, 'top', newTop + 'px');
206
      }
207
    }
208
209
    stickyElement.currentTop = newTop;
210
  }
211
});

20
function hasScrolled() {
21
    var st = $(this).scrollTop();
22
23
    // Make sure they scroll more than delta
24
    if (Math.abs(lastScrollTop - st) <= delta) return;
25
26
    // If they scrolled down and are past the navbar, add class .nav-up.
27
    // This is necessary so you never see what is "behind" the navbar.
28
    if (st > lastScrollTop && st > navbarHeight) {
29
        // Scroll Down
30
        $('header').removeClass('nav-down').addClass('nav-up');
31
    } else {
32
        // Scroll Up
33
        if (st + $(window).height() < $(document).height()) {
34
            $('header').removeClass('nav-up').addClass('nav-down');
35
        }
36
    }
37
38
    lastScrollTop = st;
39
}

39
function get_scroll_header(position, node) {
40
    for (var i = node.children.length - 1; i >= 0; --i) {
41
	var n = node.children[i];
42
	var r = get_scroll_header(position, n);
43
	if (r) {
44
	    return r;
45
	}
46
    }
47
    if (node.position <= position) {
48
	return node;
49
    }
50
}

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
}

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
}

208
function smoothScrolling() {
209
    //Special case for chat
210
    if ($(".active").attr('id') === "chat") {
211
        smoothScrollBottom();
212
    }
213
}

34
var scrolling = function scrolling() {
35
  var currentScroll = view.scrollTop;
36
  for (var i = headings.length - 1; i >= 0; i--) {
37
    var currentHeader = headings[i];
38
    var headingPosition = currentHeader.offsetTop - view.offsetTop;
39
    var offset = headingPosition - currentScroll;
40
    var currentHeight = currentHeader.offsetHeight;
41
    var differentHeaders = currentlyFixed != currentHeader;
42
    // Effect
43
    if (!notApplyEffect && Math.abs(offset) < currentHeight &&
44
        differentHeaders) {
45
      var toMove = Math.abs(offset) - currentHeight;
46
      var inEffect = toMove <= 0;
47
      var translateTop = 'translateY(' + toMove + 'px)';
48
      var transform = inEffect ? translateTop : null;
49
      fixedContainer.style.transform = transform;
50
    }
51
52
    // Switching Header
53
    if (offset <= 0) {
54
      if (differentHeaders) {
55
        if (!notApplyEffect)
56
          fixedContainer.style.transform = 'translateY(0)';
57
        currentlyFixed = currentHeader;
58
        fixedContainer.textContent = currentHeader.textContent;
59
        if (currentHeader.id == 'group-favorites') {
60
          fixedContainer.innerHTML = currentHeader.innerHTML;
61
        }
62
      }
63
      return;
64
    }
65
  }
66
  currentlyFixed = null;
67
  if (!notApplyEffect)
68
    fixedContainer.style.transform = 'translateY(-100%)';
69
};

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
}

8
export function smoothScroll(selector) {
9
  $(document).SmoothScroll({
10
    target  : selector,
11
    duration: 1000,
12
    easing  : 'easeOutQuint',
13
    offset  : () => getScrollOffset(),
14
  });
15
}

15
export default function smoothScroll() {
16
  if (window.location.hash) {
17
    if (initialRender) {
18
      setTimeout(() => {
19
        initialRender = false;
20
        scrollToHash();
21
      }, 300);
22
    } else {
23
      scrollToHash();
24
    }
25
  } else {
26
    animateScroll(0);
27
  }
28
}