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

Every line of 'smooth sticky header on scroll jquery' 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
181var 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});
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

20function 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}
39function 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}
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}
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}
208function smoothScrolling() {
209 //Special case for chat
210 if ($(".active").attr('id') === "chat") {
211 smoothScrollBottom();
212 }
213}
34var 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};
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}
8export function smoothScroll(selector) {
9 $(document).SmoothScroll({
10 target : selector,
11 duration: 1000,
12 easing : 'easeOutQuint',
13 offset : () => getScrollOffset(),
14 });
15}
15export 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}

Related snippets