位置：粘性；无论如何都不工作答案

【问题标题】：Position: sticky; not working no matter what位置：粘性；无论如何都不工作
【发布时间】：2019-04-20 01:42:55
【问题描述】：

试图让一个类在用户向下滚动页面时保持粘性并不断出现在视图中，但无论如何似乎都不起作用。

我累了：

.entry-summary{
position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;}

但这无济于事。

完整代码见下方，是本网页的一部分https://aqwaa.net/product/constriction/：

<div class="qode-single-product-summary">
    <div class="summary entry-summary">
        <div class="clearfix">
            <h1 class="product_title entry-title">Constriction</h1><p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span></span></p>
<div class="woocommerce-product-details__short-description">
    <p><strong>Mental Health Description:&nbsp;</strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>


    <form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
            <div class="quantity buttons_added">
        <input type="button" value="-" class="minus">
        <input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
        <input type="button" value="+" class="plus">
    </div>

                <button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>

            </form>


<div class="product_meta">



        <span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>


    <span class="posted_in">Category: <a href="https://aqwaa.net/product-category/aqwaa/" rel="tag">AQWAA</a></span>
    <span class="tagged_as">Tag: <a href="https://aqwaa.net/product-tag/necklace/" rel="tag">Necklace</a></span>

</div>

        <div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">

                <h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
                    <span class="tab-title">Description</span>
                </h6>
                <div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
                    <div class="accordion_content_inner">


<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>.woocommerce-product-gallery__image{width: 100% !important;}</style>

                    </div>
                </div>


                <h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
                    <span class="tab-title">Additional Information</span>
                </h6>
                <div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
                    <div class="accordion_content_inner">


<table class="woocommerce-product-attributes shop_attributes">
            <tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
            <th class="woocommerce-product-attributes-item__label">Dimensions</th>
            <td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
        </tr>
            <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
            <th class="woocommerce-product-attributes-item__label">Gold</th>
            <td class="woocommerce-product-attributes-item__value"><p>18k Gold</p>
</td>
        </tr>
            <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
            <th class="woocommerce-product-attributes-item__label">Silver</th>
            <td class="woocommerce-product-attributes-item__value"><p>.925 Sterling Silver</p>
</td>
        </tr>
    </tbody></table>
                    </div>
                </div>

                    </div>


        </div><!-- .clearfix -->
    </div><!-- .summary -->

    </div>

我希望 .summary.entry-summary 类在用户向下滚动页面时保持可见，但这不会发生。

【问题讨论】：

标签： html css class position sticky

【解决方案1】：

根据您的代码 sn-p，看起来 .entry-summary 类似乎属于一个 div，它是容器中的单个子元素。

position:sticky 只能允许子元素在同一个容器内的兄弟元素上“浮动”。

我将您的代码复制到 codepen 中，并在您的 <div class="qode-single-product-summary"> 中添加了另一个空白 <div> 以占用一些垂直空间并提供同级元素，它似乎工作得很好。

（在代码底部查找我的 cmets “我添加了这个”）此外，如果您运行我提供的 sn-p，您应该会看到粘性属性一直工作到大约一半时，当我添加的虚拟 div 结束时...

.entry-summary {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}


/* i added this */

#spacefill {
  height: 10000px;
}

<div class="qode-single-product-summary">
  <div class="summary entry-summary">
    <div class="clearfix">
      <h1 class="product_title entry-title">Constriction</h1>
      <p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span>
        </span>
      </p>
      <div class="woocommerce-product-details__short-description">
        <p><strong>Mental Health Description:&nbsp;</strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress
          which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
      </div>


      <form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
        <div class="quantity buttons_added">
          <input type="button" value="-" class="minus">
          <input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
          <input type="button" value="+" class="plus">
        </div>

        <button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>

      </form>


      <div class="product_meta">



        <span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>


        <span class="posted_in">Category: <a href="https://aqwaa.net/product-category/aqwaa/" rel="tag">AQWAA</a></span>
        <span class="tagged_as">Tag: <a href="https://aqwaa.net/product-tag/necklace/" rel="tag">Necklace</a></span>

      </div>

      <div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">

        <h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
          <span class="tab-title">Description</span>
        </h6>
        <div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
          <div class="accordion_content_inner">


            <p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
            <p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
            <style>
              .woocommerce-product-gallery__image {
                width: 100% !important;
              }
            </style>

          </div>
        </div>


        <h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
          <span class="tab-title">Additional Information</span>
        </h6>
        <div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
          <div class="accordion_content_inner">


            <table class="woocommerce-product-attributes shop_attributes">
              <tbody>
                <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
                  <th class="woocommerce-product-attributes-item__label">Dimensions</th>
                  <td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
                </tr>
                <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
                  <th class="woocommerce-product-attributes-item__label">Gold</th>
                  <td class="woocommerce-product-attributes-item__value">
                    <p>18k Gold</p>
                  </td>
                </tr>
                <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
                  <th class="woocommerce-product-attributes-item__label">Silver</th>
                  <td class="woocommerce-product-attributes-item__value">
                    <p>.925 Sterling Silver</p>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>
      <div id="spacefill">
      </div>

    </div>
    <!-- .clearfix -->
  </div>
  <!-- .summary -->
  <div id="spacefill">
    <!-- I added this -->
  </div>
</div>

【讨论】：

非常感谢！不幸的是，尽管完全按照您所做的那样，它仍然无法正常工作......可能是 .entry-summary 的 CSS 中的 float:right; 阻止了 position:sticky; 运行，或者网页上的其他东西阻止了它?可以替代使用 Javascript 吗？

【解决方案2】：

这是最适合我的解决方案。你可以看到final result on the webpage。涉及使用position:fixed 和一些漂亮的z-index 作弊。

.woocommerce-product-gallery__image{width: 100% !important;}

@media all and (min-width:1000px) { 

.qode-single-product-summary {
    position: fixed;
    z-index: 110;
    right: 113px;
      width: 40%;
}
.woocommerce .summary {
    float: right;
    width: 100%;
    margin-bottom: 45px;
}
.woocommerce ul.products {
    background: #fff;
    z-index: 999999999999999999999;
    position: relative;
    display: table;
}
.qode-single-product-summary {
    position: fixed;
    z-index: 110;
    right: 113px;
      width: 40%;
}
.woocommerce .summary {
    float: right;
    width: 100%;
    margin-bottom: 45px;
}
.woocommerce ul.products {
    background: #fff;
    z-index: 999999999999999999999;
    position: relative;
    display: table;
    margin: 0 0 0px;
}
.content_bottom {
    padding-top: 80px;
    background: #fff;
}
.woocommerce-page .content .container .container_inner {
    padding-bottom: 0!important;
}
h2.qode-related-upsells-title {
    z-index: 99999999999;
    background: #fff;
    padding-top: 0!important;
    display: table;
    position: relative;
    width: 100%;
    margin-bottom: 0!important;
    padding-bottom: 34px;
}
}
@media all and (min-width:1500px) {
.qode-single-product-summary {
    width: 1300px; right:initial;
}
.woocommerce .summary {
    width: 500px;
}
}

【讨论】：