Position: sticky; not working no matter what - html

Question

Trying to get a class to remain sticky and constantly be in view when the user scrolls down the page, but doesn't seem to work no matter what.
I tired:
.entry-summary{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
But this does nothing.
The full code can be seen below and is part of this webpage 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: </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: AQWAA</span>
<span class="tagged_as">Tag: Necklace</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>
I expect the class .summary.entry-summary to remain visible as the user scrolls down the page, this does not happen.

Answer 1

Based on your code snippet, it looks as though the .entry-summary class belongs to one div, which is a single child element in a container.
The position:sticky can only allow the child to 'float' over sibling elements within the same container.
I copied your code into codepen, and added another blank <div> in your <div class="qode-single-product-summary"> to take up some vertical space and provide a sibling element, and it appears to be working just fine.
(Look for my comments "I added this" towards the bottom of your code)
Also if you run the snippet I provided, you should see the sticky property working until approximately half way down when the dummy div I added ends...
.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: </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: AQWAA</span>
<span class="tagged_as">Tag: Necklace</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>

Answer 2

Here's the solution that worked best for me. You can see the final result on the webpage. Involves using position:fixed and some nifty z-index cheats.
.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;
}
}