在滾動條上粘貼 header 給出了混蛋首演主題 shopify

Question

嗨，我在我的首個主題 shopify 上創建了棒 header。 滾動條位於頁面頂部。 但是當我向下移動頁面時。 它突然使整個 header

這是 header 的 HTML

 <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>

因此，在滾動時，它將 class “粘性”添加到.ann_header。 觸發此 css 代碼

 .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; }

我嘗試過的代碼是這些代碼第一：

 $(window).scroll(function() { if ($(this).scrollTop() > 60){ $('.ann_header').addClass("sticky"); } else{ $('.ann_header').removeClass("sticky"); } });

我使用的另一個代碼是

 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"); } });

它仍然在做混蛋，請告訴我如何解決這個問題

Answer 1

在我看來，應用position: sticky dynamic with JavaScript 似乎是在濫用該屬性position: sticky ，你可以簡單地提供閾值：

 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>

您的問題沒有包含足夠的詳細信息（例如標記），我無法在不點擊受密碼保護的第三方資源的情況下重現該問題，這讓我感到不舒服，但我認為您的問題很可能源於此誤用position: sticky 。 如果這不能充分解決您的問題，我建議在問題正文中使用真正的最小可重現示例來更新問題。

Answer 2

檢查您的網站，header 位於頂部，為什么您不能使用position: fixed ，默認情況下超過 header？

使用 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;
}