html - 定位:粘性；无论如何都不工作

Question

试图让一个类保持粘性并在用户向下滚动页面时始终可见，但无论如何似乎都不起作用。

我累了:

.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 在用户向下滚动页面时保持可见，但这并没有发生。

Answer 1

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

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

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

(在您的代码底部查找我的评论“我添加了这个”)此外，如果您运行我提供的代码片段，您应该会看到粘性属性一直有效，直到我添加的虚拟 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>