Положение: липкое;не работает ни на что - PullRequest
0 голосов
/ 20 апреля 2019

Попытка заставить класс оставаться липким и постоянно находиться в поле зрения, когда пользователь прокручивает страницу вниз, но, кажется, не работает, несмотря ни на что.

Я устал:

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

1 голос
/ 20 апреля 2019

Исходя из вашего фрагмента кода, создается впечатление, что класс .entry-summary принадлежит одному элементу div, который является единственным дочерним элементом в контейнере.

Позиция: sticky может позволить ребенку «плавать» над элементами-братьями в одном и том же контейнере.

Я скопировал ваш код в кодовую ручку и добавил еще один пробел <div> в ваш <div class="qode-single-product-summary">, чтобы занять некоторое вертикальное пространство и предоставить элемент родного брата, и, похоже, он работает нормально.

(поищите мои комментарии «Я добавил это» внизу вашего кода). Также, если вы запустите предоставленный мной фрагмент, вы увидите, что свойство sticky работает примерно до половины, когда фиктивный 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>
0 голосов
/ 21 апреля 2019

Вот решение, которое лучше всего сработало для меня. Вы можете увидеть окончательный результат на веб-странице . Включает использование 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;
}
}
...