在滚动条上粘贴 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;
}