Stick header on scroll gives jerk debut theme shopify

Question

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/logo-img1_165x@2x.png?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

Answer 1

Applying a position: sticky dynamically with JavaScript seems to me to be misusing the property-- the usefulness of position: sticky is that you can simply provide the threshold at which you want it to stick, like so:

 header { height: 40px; background: purple; position: sticky; top: -1px; }

 <header>Header stuff</header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

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.

Answer 2

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

div[data-section-id="header"]{
    position: fixed;
    z-index: 1;
}
.template-index .header-wrapper {
    position: unset;
}
.page-container.drawer-page-content{
    padding-top: 43px;
}