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

时间：2019-04-20 01:42:55

标签： html css class position sticky

当用户向下滚动页面时，尝试使类保持粘性并不断显示，但无论如何似乎都行不通。

我很累：

.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仍然保持可见，这不会发生。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

这是最适合我的解决方案。您可以看到final result on the webpage。涉及使用--std=c++11 -O0 -ggdb -Wall -Wextra 和一些漂亮的position:fixed作弊。

z-index
相关问题
最新问题