Question posted in 
Hi i have created the stick header on my debut theme shopify. which on scroll sticks at the top of the page. but when I move the page downwards. it gives a sudden jerk to the whole header
Here is the HTML of the header
<div class="ann_header">
<div class="announcement-bar" role="region" aria-label="Announcement">
<section>
<ul class="news-list" data-length="5">
<li class="news">
<p class="news__title">Discreet Shipping on all orders </p>
</li>
<li class="news">
<p class="news__title">Free shipping <span class="on"> <a href="#">on all orders above Rs500</a></span></p>
</li>
<li class="news">
<p class="news__title">Discreet Shipping on all orders </p>
</li>
<li class="news">
<p class="news__title">Free shipping <span class="on"> <a href="#">on all orders above Rs500</a></span></p>
</li>
<li class="news">
<p class="news__title">Discreet Shipping on all orders </p>
</li>
<li class="news">
<p class="news__title">Free shipping <span class="on"> <a href="#">on all orders above Rs500</a></span></p>
</li>
</ul>
</section>
</div>
<div class="header-wrapper">
<div class="container">
<header class="site-header border-bottom logo--left" role="banner">
<div class="grid grid--no-gutters grid--table site-header__mobile-nav">
<div class="grid__item medium-up--one-quarter logo-align--left">
<div class="h2 site-header__logo">
<a href="/" class="site-header__logo-image">
<img class="js lazyautosizes ls-is-cached lazyloaded" src="//cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_300x300.png?v=1611577640" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="4.840909090909091" data-sizes="auto" alt="My Brand Better" style="max-width: 165px" data-srcset="//cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_180x.png?v=1611577640 180w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_360x.png?v=1611577640 360w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_540x.png?v=1611577640 540w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_720x.png?v=1611577640 720w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_900x.png?v=1611577640 900w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1080x.png?v=1611577640 1080w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1296x.png?v=1611577640 1296w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1512x.png?v=1611577640 1512w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1728x.png?v=1611577640 1728w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_2048x.png?v=1611577640 2048w" sizes="211px" srcset="//cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_180x.png?v=1611577640 180w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_360x.png?v=1611577640 360w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_540x.png?v=1611577640 540w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_720x.png?v=1611577640 720w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_900x.png?v=1611577640 900w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1080x.png?v=1611577640 1080w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1296x.png?v=1611577640 1296w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1512x.png?v=1611577640 1512w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_1728x.png?v=1611577640 1728w, //cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_2048x.png?v=1611577640 2048w">
<noscript>
<img src="//cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_165x.png?v=1611577640"
srcset="//cdn.shopify.com/s/files/1/0533/5623/2875/files/logo-img1_165x.png?v=1611577640 1x, //cdn.shopify.com/s/files/1/0533/5623/2875/files/[email protected]?v=1611577640 2x"
alt="My Brand Better"
style="max-width: 165px;">
</noscript>
</a>
</div>
</div>
<div class="header_links">
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
<ul class="site-nav list--inline" id="SiteNav">
<li>
<a href="/" class="site-nav__link site-nav__link--main">
<span class="site-nav__label">Home</span>
</a>
</li>
<li class="site-nav--has-dropdown" data-has-dropdowns="">
<button class="site-nav__link site-nav__link--main site-nav__link--button" type="button" aria-expanded="false" aria-controls="SiteNavLabel-supplements">
<span class="site-nav__label">Supplements </span><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"></path></svg>
</button>
<div class="site-nav__dropdown critical-hidden site-nav__dropdown--left" id="SiteNavLabel-supplements">
<ul>
<li>
<a href="/collections/all" class="site-nav__link site-nav__child-link">
<span class="site-nav__label">Condoms</span>
</a>
</li>
<li>
<a href="/collections/all" class="site-nav__link site-nav__child-link">
<span class="site-nav__label">Lubricants</span>
</a>
</li>
<li>
<a href="/collections/all" class="site-nav__link site-nav__child-link site-nav__link--last">
<span class="site-nav__label">Oils</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="https://my-brand-better.myshopify.com/#health_advice" class="site-nav__link site-nav__link--main">
<span class="site-nav__label">Health Advice</span>
</a>
</li>
<li>
<a href="https://my-brand-better.myshopify.com/#blog" class="site-nav__link site-nav__link--main">
<span class="site-nav__label">Blog</span>
</a>
</li>
<li class="site-nav--active">
<a href="/pages/contact-us" class="site-nav__link site-nav__link--main site-nav__link--active" aria-current="page">
<span class="site-nav__label">Contact</span>
</a>
</li>
</ul>
</nav>
<div class="grid__item medium-up--one-quarter text-right site-header__icons site-header__icons--plus">
<div class="site-header__icons-wrapper">
<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer="" aria-controls="dialog" aria-expanded="false">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
<span class="icon__fallback-text">Search</span>
</button>
<a href="/account/login" class="site-header__icon site-header__account">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
<span class="icon__fallback-text">Log in</span>
</a>
<a href="/cart" class="site-header__icon site-header__cart">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h-9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v-3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"></path></svg>
<span class="icon__fallback-text">Cart</span>
<div id="CartCount" class="site-header__cart-count hide critical-hidden" data-cart-count-bubble="">
<span data-cart-count="">0</span>
<span class="icon__fallback-text medium-up--hide">items</span>
</div>
</a>
<button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="Menu">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 37 40"><path d="M33.5 25h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2s-.9 2-2 2zm0-11.5h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2s-.9 2-2 2zm0 23h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2s-.9 2-2 2z"></path></svg>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 40 40"><path d="M23.868 20.015L39.117 4.78c1.11-1.108 1.11-2.77 0-3.877-1.109-1.108-2.773-1.108-3.882 0L19.986 16.137 4.737.904C3.628-.204 1.965-.204.856.904c-1.11 1.108-1.11 2.77 0 3.877l15.249 15.234L.855 35.248c-1.108 1.108-1.108 2.77 0 3.877.555.554 1.248.831 1.942.831s1.386-.277 1.94-.83l15.25-15.234 15.248 15.233c.555.554 1.248.831 1.941.831s1.387-.277 1.941-.83c1.11-1.109 1.11-2.77 0-3.878L23.868 20.015z" class="layer"></path></svg>
</button>
</div>
</div>
</div>
</div>
</header></div>
</div>
</div>So on scroll it adds the class "sticky" to the .ann_header. which triggers this css code
.ann_header {
z-index: 9;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.ann_header.sticky {
position: fixed;
top: 0px;
left: 0;
width: 100%;
margin: auto;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.ann_header.sticky .header-wrapper{
background: #27191b;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}The code I have tried are these code number one:
$(window).scroll(function() {
if ($(this).scrollTop() > 60){
$('.ann_header').addClass("sticky");
}
else{
$('.ann_header').removeClass("sticky");
}
});The other code I have used is
JQuery(document).ready(function(){$(".ann_header").css('display','block');});
$(window).scroll(function(){
if($(".ann_header").offset().top>100){
$(".ann_header").fadeIn(200).addClass("sticky");
}
else{
$(".ann_header").fadeOut(200).removeClass("sticky");
}
});It is still doing the jerk, please let me know how I can resolve this issue
2
Answers
Applying a
position: stickydynamically with JavaScript seems to me to be misusing the property– the usefulness ofposition: stickyis that you can simply provide the threshold at which you want it to stick, like so:Your question did not include enough detail (such as markup) for me to reproduce the issue without clicking away to a password-protected third-party resource, which I was not comfortable doing, but I believe that your issue most likely stems from this misapplication of
position: sticky. If this does not adequately resolve your issue, I’d recommend updating the question with a true minimal reproducible example in the question body.Check your website and the header is on top and why you can’t use the
position: fixed, by default over the header?Try this code using CSS