Sticky Sidebar with parent Div - html

Question

I know there are similar questions but I can't seem to implement the answers successfully so i'd thought i'd ask to try get an answer for my context.
I'm trying to keep a div with class .product-info fixed on the screen as you scroll down the page, with in it's parent div (.product-info-container). Once the fixed div reaches the bottom of the parent it should stop, i've tried using position:fixed but it fixes the div to the window, not the parent div.
Any help would be appreciated.
HTML:
/* Container */
.product-wrapper {
width: 100vw;
margin: auto;
}
.product-introduction {
height: auto;
min-height: calc(100vh - 140px);
width: 70vw;
min-width: 1400px;
margin: auto;
margin-top: 140px;
margin-bottom: 0;
display: flex;
flex-direction: row;
position: relative;
}
.product-image-grid {
height: auto;
width: 60%;
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start
}
.image-container {
margin: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: whitesmoke;
}
.image-container.small {
width: calc(50% - 40px);
height: 500px
}
.Product-Image {
height: 100%;
}
.image-container.large {
width: calc(100% - 10px);
height: 1000px;
}
.product-info-container {
height: 1500px;
min-height: calc(10vh - 140px);
width: calc(550px - 25px);
min-width: calc(550px - 25px);
position: relative;
padding-left: 25px;
}
.product-info {
position: fixed;
height: auto;
width: calc(550px - 20px);
padding: 10px;
}
h1.product-title {
font-family: "Magistral_Bold";
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}
.icon-bar {
width: 50%;
min-width: 300px;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 25px;
margin-bottom: 25px;
}
.intro-feature-icon {
width: 150px;
}
.intro-feature-icon:first-child {
margin-left: 0;
}
.intro-feature-icon:nth-of-type(2) {
width: 100px;
}
.price-bar {
width: 50%;
height: auto;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: flex-end;
}
.price-bar h2 {
margin-left: 0;
margin-right: 50px;
}
.currency-selector {
color: #919191;
font-size: 18px;
margin-bottom: 5px !important;
margin-right: 15px;
cursor: pointer;
}
.currency-selector.selected {
color: black !important;
}
.currency-selector:hover {
text-decoration: underline;
}
.wtb-cta {
width: auto;
padding: 16px 32px;
background: black;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
}
.accordion {
cursor: pointer;
padding: 0;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 50px;
border-bottom: 1px solid black;
}
.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active,
.accordion:hover {}
.active:after {
content: "\2796";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="product-wrapper">
<div class="product-introduction">
<div class="product-image-grid">
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-1.png" alt="Test Image 1" class="Product-Image One">
</div>
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-2.png" alt="Test Image 2" class="Product-Image Two">
</div>
<div class="image-container large">
<img src="Images/01-Product-Images/Test-image-3.png" alt="Test Image 3" class="Product-Image Three">
</div>
</div>
<div class="product-info-container">
<div class="product-info">
<h1 class="product-title no-shadow">Hinterland</h1>
<h4 class="h4-black no-shadow">DRY2DRY™ TRI-LAMINATE JACKET</h4>
<div class="icon-bar">
<img src="Images/02-Icons/Tech-Icons/Materials/TriLaminate/TriLaminateD2D-square-black.png" alt="Tri Laminate Logo" class="intro-feature-icon">
<img src="Images/02-Icons/Tech-Icons/CE-Icons/ce-approved.png" alt="CE Approved Logo" class="intro-feature-icon">
</div>
<p class="black no-shadow">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis velit aperiam soluta maiores fugiat facere dolorum obcaecati, repellat commodi eveniet deserunt doloribus, esse magnam alias qui eos officia reprehenderit? Dolorum.
</p>
<div class="price-bar">
<h2 class="h2-min black no-shadow">£299.99</h2>
<p class="currency-selector no-shadow selected"> £ </p>
<p class="currency-selector no-shadow "> $ </p>
</div>
<a href="#">
<div class="wtb-cta">
<h3>WHERE TO BUY</h2>
</div>
</a>
<button class="accordion">
<h3 class="black no-shadow">DESCRIPTION</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
<button class="accordion">
<h3 class="black no-shadow">ADDITIONAL INFO</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

I hope this is what u r expecting.
Add position:sticky and top:0 to .product-info class.
.product-info {
position:sticky;
top:0px;
height: auto;
width: calc(550px - 20px);
padding: 10px;
}
/* Container */
.product-wrapper {
width: 100vw;
margin: auto;
}
.product-introduction {
height: auto;
min-height: calc(100vh - 140px);
width: 70vw;
min-width: 1400px;
margin: auto;
margin-top: 140px;
margin-bottom: 0;
display: flex;
flex-direction: row;
position: relative;
}
.product-image-grid {
height: auto;
width: 60%;
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start
}
.image-container {
margin: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: whitesmoke;
}
.image-container.small {
width: calc(50% - 40px);
height: 500px
}
.Product-Image {
height: 100%;
}
.image-container.large {
width: calc(100% - 10px);
height: 1000px;
}
.product-info-container {
height: 1500px;
min-height: calc(10vh - 140px);
width: calc(550px - 25px);
min-width: calc(550px - 25px);
position: relative;
padding-left: 25px;
}
.product-info {
position:sticky;
top:0px;
height: auto;
width: calc(550px - 20px);
padding: 10px;
}
h1.product-title {
font-family: "Magistral_Bold";
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}
.icon-bar {
width: 50%;
min-width: 300px;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 25px;
margin-bottom: 25px;
}
.intro-feature-icon {
width: 150px;
}
.intro-feature-icon:first-child {
margin-left: 0;
}
.intro-feature-icon:nth-of-type(2) {
width: 100px;
}
.price-bar {
width: 50%;
height: auto;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: flex-end;
}
.price-bar h2 {
margin-left: 0;
margin-right: 50px;
}
.currency-selector {
color: #919191;
font-size: 18px;
margin-bottom: 5px !important;
margin-right: 15px;
cursor: pointer;
}
.currency-selector.selected {
color: black !important;
}
.currency-selector:hover {
text-decoration: underline;
}
.wtb-cta {
width: auto;
padding: 16px 32px;
background: black;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
}
.accordion {
cursor: pointer;
padding: 0;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 50px;
border-bottom: 1px solid black;
}
.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active,
.accordion:hover {}
.active:after {
content: "\2796";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="product-wrapper">
<div class="product-introduction">
<div class="product-image-grid">
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-1.png" alt="Test Image 1" class="Product-Image One">
</div>
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-2.png" alt="Test Image 2" class="Product-Image Two">
</div>
<div class="image-container large">
<img src="Images/01-Product-Images/Test-image-3.png" alt="Test Image 3" class="Product-Image Three">
</div>
</div>
<div class="product-info-container">
<div class="product-info">
<h1 class="product-title no-shadow">Hinterland</h1>
<h4 class="h4-black no-shadow">DRY2DRY™ TRI-LAMINATE JACKET</h4>
<div class="icon-bar">
<img src="Images/02-Icons/Tech-Icons/Materials/TriLaminate/TriLaminateD2D-square-black.png" alt="Tri Laminate Logo" class="intro-feature-icon">
<img src="Images/02-Icons/Tech-Icons/CE-Icons/ce-approved.png" alt="CE Approved Logo" class="intro-feature-icon">
</div>
<p class="black no-shadow">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis velit aperiam soluta maiores fugiat facere dolorum obcaecati, repellat commodi eveniet deserunt doloribus, esse magnam alias qui eos officia reprehenderit? Dolorum.
</p>
<div class="price-bar">
<h2 class="h2-min black no-shadow">£299.99</h2>
<p class="currency-selector no-shadow selected"> £ </p>
<p class="currency-selector no-shadow "> $ </p>
</div>
<a href="#">
<div class="wtb-cta">
<h3>WHERE TO BUY</h2>
</div>
</a>
<button class="accordion">
<h3 class="black no-shadow">DESCRIPTION</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
<button class="accordion">
<h3 class="black no-shadow">ADDITIONAL INFO</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
</div>
</div>
</div>
</div>