Thiết kế website giá rẻ

Question

I’m trying to achieve the sticky effect as AboutYou does for their Cart/Basket on Mobile Viewport, meaning, the price summary is sticky, and once the price legend is reached, it will stop scrolling. Here a quick demo:

The layout I’m having, simplified:

@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");
.placeholder {
  height: 600px;
  background-color: #fff7bd;
}
.placeholder span {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  color: black;
  text-align: center;
  font-size: 12px;
}

.container-frame {
  position: relative;
  width: 390px;
  height: 500px;
  overflow: scroll;
  border: 1px solid gray;
}

.akademie--cart .akademie-row--sticky-container {
  position: relative;
}
.akademie--cart .akademie--summary {
  background-color: #f6f6f6;
  border: 1px solid #e0e1e5;
  padding: 1rem;
}
.akademie--cart .akademie--summary.small {
  padding: 0;
  position: relative;
  width: 100%;
  display: block;
  border-radius: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}
.akademie--cart .akademie--summary.small .akademie-summary--full {
  background-color: #f6f6f6;
  margin-bottom: 0;
  padding: 1rem;
}
.akademie--cart .akademie--summary.large {
  display: none;
}
.akademie--cart .akademie--summary .akademie-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  font-size: 0.875em;
}
.akademie--cart .akademie--summary .akademie-row--sticky {
  background-color: #f6f6f6;
  position: sticky;
  z-index: 1054;
  padding: 0rem 1rem;
}
.akademie--cart .akademie--summary .akademie-summary--full {
  color: #86888f;
}
.akademie--cart .akademie--summary .akademie-summary--full > span:nth-child(2) {
  text-decoration: line-through;
}
.akademie--cart .akademie--summary .akademie-summary--reduced {
  color: green;
}
.akademie--cart .akademie--summary .akademie-summary--total {
  color: 1b1d23;
  font-weight: bold;
  font-size: 1rem;
}
.akademie--cart .akademie--summary .akademie-summary--item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 8px 8px;
  margin-bottom: 8px;
  transition: opacity 0.3s ease-in-out;
  border: 2px solid transparent;
  cursor: pointer;
}
.akademie--cart .akademie--summary .akademie-summary--item .product-image {
  display: block;
}
.akademie--cart .akademie--summary .akademie-summary--item .product-image .productImageTeaser {
  --x-card-border-radius: 0.25rem;
  width: 64px;
  height: 48px;
}
.akademie--cart .akademie--summary .akademie-summary--item .product-image .productImageTeaser .card-isolatedsubject {
  max-width: 34px;
}
.akademie--cart .akademie--summary .akademie-summary--item .product-meta,
.akademie--cart .akademie--summary .akademie-summary--item .product-price {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  /* Smooth transition for opacity and visibility */
  opacity: 0;
  visibility: hidden;
}
.akademie--cart .akademie--summary .akademie-summary--item .product-meta {
  font-size: 0.875em;
}
.akademie--cart .akademie--summary .akademie-summary--item .product-price {
  font-weight: bold;
}
.akademie--cart .akademie--summary .akademie-summary--item .product-info {
  margin-left: 15px;
  flex-grow: 1;
}
.akademie--cart .akademie--summary .akademie-summary--item.inactive {
  opacity: 0.5;
}
.akademie--cart .akademie--summary .akademie-summary--item.inactive .product-meta,
.akademie--cart .akademie--summary .akademie-summary--item.inactive .product-price {
  opacity: 0;
  visibility: hidden;
}
.akademie--cart .akademie--summary .akademie-summary--item.active {
  opacity: 1;
}
.akademie--cart .akademie--summary .akademie-summary--item.active .product-meta,
.akademie--cart .akademie--summary .akademie-summary--item.active .product-price {
  opacity: 1;
  visibility: visible;
}

<section class="akademie--cart">
  <div class="position-relative">
    <div class="container-frame">

      <div class="placeholder"><span>this is placeholder content to make it scrollable</span></div>

      <!-- Cart Summary -->
      <div class="akademie--summary small is-fixed">

        <div class="akademie-row akademie-summary--full">
          <span>Full Price</span>
          <span>5.433 €</span>
        </div>
        
        <!-- This should be sticky -->
        <div class="akademie-row--sticky">
          <div class="akademie-row akademie-summary--reduced">
            <span>Discount</span>
            <span>-2.200 €</span>
          </div>
          <div class="akademie-row akademie-summary--total">
            <span>Total</span>
            <span>3.211 €</span>
          </div>
          <button type="submit" class="d-block btn btn-primary btn-sm btn-gradient btn-next font-bold mt-xl-4 w-100" id="!">Weiter zur Kasse</button>
        </div>

      </div>

    </div>
  </div>
  </div>

Trying to make the part also sticky, setting them to position sticky hasn’t worked. Any ideas what am I missing?

Thiết kế website giá rẻ

Danh mục

Making a cart legend as sticky on mobile