Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How do I make my fixed sidebar scroll up as the footer comes up

byMR
December 7, 2021

My problem is that the sidebar shouldn’t be fixed once the footer enters the viewport.

I have found dozens of questions regarding the fixed sidebar, but the answers I found here are not solving my problem.

I found something similar here
but my problem is, I am not able to apply this solution as my HTML structure is different.
I would also prefer it if your answers were in pure js and not jquery

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

a {
  text-decoration: none;
  transition: all 0.3s;
  color: black;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}

.sidebar.container {
  position: fixed;
  bottom: 0;
  left: 0;
  top: 6.7vw;
  width: 20%;
  z-index: 1;
  text-transform: uppercase;
  /* overflow-y: scroll; */
  padding: 1vw;
}

.sidebar .inner .categories * {
  padding: .5vw;
}

.sidebar .inner .categories h5 {
  font-size: 15px;
  font-weight: 400;
}

.sidebar .inner .categories p {
  font-size: 13px;
  text-indent: 1vw;
}

.sidebar .inner .categories h5 a:hover,
.sidebar .inner .categories p a:hover {
  color: #cfab53;
}

.main.container {
  /* right: 0;
    bottom: 0;
    left: 20%;
    top: 0vw;
    position: absolute; */
  width: 100%;
  padding: 1vw;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.main .category {
  padding-top: 6.7vw;
  width: 80%;
}

.main .category h2 {
  padding: 1vw;
}

.main .category hr {
  border: none;
  border-top: .1vw solid #cfab53;
  width: 50%;
  margin-left: 1vw;
  margin-bottom: 1vw;
}

.main .category .products {
  display: flex;
  flex-wrap: wrap;
}

.main .category .products .card {
  width: 30%;
  margin: 1vw;
  padding: 1vw;
  /* border: 1px solid #cfab53; */
  position: relative;
  min-height: 28vw;
}

.main .category .products .card .prodimg img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #cfab53;
  min-height: 20vw;
}

.main .category .products .card .prodimg img.primary {
  z-index: 1;
}

.main .category .products .card .prodimg:hover img.primary {
  display: none;
}

.main .category .products .card .desc {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 2vw;
}

.main .category .products .card .desc h3 a:hover {
  color: #cfab53;
}

.main .category .products .card .type {
  display: flex;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  align-items: center;
}

.main .category .products .card .type .border {
  border-radius: 10000px;
  border: 1px solid #bdbdbd;
  padding: 2px;
  margin-right: 5px;
}

.main .category .products .card .type .border .color {
  border-radius: 10000px;
  width: 13px;
  height: 13px;
  background-color: #cfab53;
}

.footer.container {
  /* position: absolute;
    bottom: 0;
    left: 0;
    right: 0; */
  width: 100%;
  border-top: 1px solid #cfab53;
  background-color: white;
}

.footer .top {
  display: flex;
  padding: 1vw;
  justify-content: space-between;
  align-items: flex-start;
}

.footer .top .column {
  width: 25%;
  padding: 1vw;
}

.footer .top .column h1 {
  font-size: 23px;
  letter-spacing: -2px;
  padding: .5vw;
}

.footer .top .column p {
  letter-spacing: -1px;
  font-size: 15px;
}

.footer .top .column a {
  letter-spacing: -1px;
  font-size: 15px;
}

.footer .top .column a:hover {
  color: #cfab53;
}

.footer .logo {
  padding: 1vw 2vw 0vw;
}

.footer .logo h1 {
  font-family: 'GFS Didot', serif;
  color: #cfab53;
  font-size: 35px;
  letter-spacing: normal;
  cursor: pointer;
}

.footer .top .site h3 {
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  font-weight: 400;
}

.footer .top .site p {
  font-size: 15px;
  padding: 1vw 0vw;
  font-weight: 600;
  letter-spacing: normal;
}

.footer .top .customer ul li {
  padding: .3vw .5vw;
}

.footer .top .customer ul li a {
  letter-spacing: -1px;
  font-size: 15px;
}

.footer .top .contact p,
.footer .top .contact a {
  padding: .3vw .5vw;
}

.footer .top .contact .email {
  display: flex;
  flex-direction: column;
}

.footer .top .sign p {
  padding: .5vw 0;
}

.footer .top .sign .input {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border: 1px solid #cfab53;
  margin: 1vw 0vw;
}

.footer .top .sign .input .fa-envelope {
  color: #cfab53;
  padding: 0vw 0vw 0vw .5vw;
  width: 10%;
}

.footer .top .sign .input input {
  border: none;
  padding: 0vw .5vw;
  margin: 0vw 0vw 0vw 0vw;
  width: 80%;
}

.footer .top .sign .input i.fa-chevron-right {
  background-color: #cfab53;
  color: white;
  padding: 5px;
  width: 10%;
  text-align: center;
  cursor: pointer;
}

.footer .top .sign .input i.fa-chevron-right:hover {
  background-color: #bb9c4d;
}

.footer .bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer .socials {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer .socials * {
  padding: .5vw;
  font-size: 12px;
  letter-spacing: -1px;
}

.footer .socials a:hover {
  color: #cfab53;
}

.footer .socials .icons i {
  font-size: 18px;
  font-weight: 700;
}

.footer .socials .icons i.fa-instagram:hover {
  color: #bc2a8d;
}

.footer .socials .icons i.fa-pinterest:hover {
  color: #bd081c;
}

.footer .socials .icons i.fa-twitter:hover {
  color: #1DA1F2;
}
<div class="sidebar container">
  <div class="inner">
    <div class="categories">
      <h5><a href="./product-display-bracelets-and-anklets.html">Bracelets + Anklets</a></h5>
      <p><a href="#bracelets">Bracelets</a></p>
      <p><a href="#chain">Chain Bracelets</a></p>
      <p><a href="#cuff">Cuffs And Bangles</a></p>
      <p><a href="#zodaic">Zodiac Bracelets</a></p>
      <p><a href="#mens">Men's Bracelets</a></p>
      <p><a href="#anklets">Anklets</a></p>
    </div>
    <div class="categories">
      <h5><a href="./product-display-wedding.html">Wedding</a></h5>
    </div>
    <div class="categories">
      <h5><a href="./product-display-mens.html">Men's</a></h5>
    </div>
  </div>
</div>

<div class="main container">
  <div id="bracelets" class="category container">
    <h2>Bracelets</h2>
    <hr>
    <div class="products">
      <div class="card">
        <div class="prodimg">
          <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
          <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
        </div>
        <div class="desc">
          <h3><a>Circle Bracelet</a></h3>
          <p>$120.00</p>
        </div>
        <div class="type">
          <div class="border">
            <div class="color"></div>
          </div>
          <p>14k Yellow Gold</p>
        </div>
      </div>
      <div class="card">
        <div class="prodimg">
          <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
          <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
        </div>
        <div class="desc">
          <h3><a>Circle Bracelet</a></h3>
          <p>$120.00</p>
        </div>
        <div class="type">
          <div class="border">
            <div class="color"></div>
          </div>
          <p>14k Yellow Gold</p>
        </div>
      </div>
      <div class="card">
        <div class="prodimg">
          <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
          <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
        </div>
        <div class="desc">
          <h3><a>Circle Bracelet</a></h3>
          <p>$120.00</p>
        </div>
        <div class="type">
          <div class="border">
            <div class="color"></div>
          </div>
          <p>14k Yellow Gold</p>
        </div>
      </div>
      <div class="card">
        <div class="prodimg">
          <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
          <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
        </div>
        <div class="desc">
          <h3><a>Circle Bracelet</a></h3>
          <p>$120.00</p>
        </div>
        <div class="type">
          <div class="border">
            <div class="color"></div>
          </div>
          <p>14k Yellow Gold</p>
        </div>
      </div>
      <div class="card">
        <div class="prodimg">
          <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
          <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
        </div>
        <div class="desc">
          <h3><a>Circle Bracelet</a></h3>
          <p>$120.00</p>
        </div>
        <div class="type">
          <div class="border">
            <div class="color"></div>
          </div>
          <p>14k Yellow Gold</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="foot" class="footer container">
  <div class="logo container">
    <h1>κοσμήματα</h1>
  </div>
  <div class="top">
    <div class="site column">
      <h3>Kosmimata jewelry</h3>
      <p>Accessorise yourself with the best there is</p>
    </div>
    <div class="customer column">
      <h1>Customer Care</h1>
      <ul>
        <li><a href="./faq.html#shipping">Shipping & Returns</a></li>
        <li><a href="./order-status.html">Order Status</a></li>
        <li><a href="./faq.html#payment">Payment Methods</a></li>
        <li><a href="./ring-sizer.html">Ring Sizer</a></li>
      </ul>
    </div>
    <div class="contact column">
      <div class="address">
        <h1>Visit</h1>
        <p>1985 Bel Meadow Drive,</p>
        <p>Los Angeles, California</p>
        <p>90017</p>
      </div>
      <div class="email">
        <a href="mailto:info@kosmimata.com">info@kosmimata.com</a>
        <a href="tel:+1 213-829-0743">213-829-0743</a>
      </div>
    </div>
    <div class="sign column">
      <p>Sign up to have insider info on new arrivals, early access and more.</p>
      <div class="input">
        <i class="far fa-envelope"></i>
        <input type="email" placeholder="Your Email">
        <i class="fas fa-chevron-right"></i>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="socials">
      <a href="./terms&conditions.html">Terms and Conditions</a>
      <a href="./privacy-policy.html">Privacy Policy</a>
      <a href="./sitemap.html">Site Map</a>
      <p>&copy;Kosmimata Inc.</p>
      <div class="icons">
        <a href=""><i class="fab fa-instagram"></i></a><a href=""><i class="fab fa-pinterest"></i></a><a href=""><i class="fab fa-twitter"></i></a>
      </div>
    </div>
  </div>
</div>

>Solution :

It looks like you are trying to have the sidebar follow the content until there’s not enough space, then it locks in place. You could do this with JS, but it’s far easier with CSS position:sticky;

Here’s MDN’s documentation

Sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

position: -webkit-sticky;
position: sticky;
top: 20px;

You will need to tweak the HTML so that the sidebar and main content are in the same container for this to work. There are also a few CSS changes that I made as well.

Try this:

.trueContainer {
  display:flex;
  align-items: flex-start;
  padding-top:6.7vw
}

a {
  text-decoration: none;
  transition: all 0.3s;
  color: black;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}

.sidebar.container {
  position: sticky;
  top:0;
  left:0;
  width: 20%;
  z-index: 1;
  text-transform: uppercase;
  /* overflow-y: scroll; */
  padding: 1vw;
}

.sidebar .inner .categories * {
  padding: .5vw;
}

.sidebar .inner .categories h5 {
  font-size: 15px;
  font-weight: 400;
}

.sidebar .inner .categories p {
  font-size: 13px;
  text-indent: 1vw;
}

.sidebar .inner .categories h5 a:hover,
.sidebar .inner .categories p a:hover {
  color: #cfab53;
}

.main.container {
  /* right: 0;
    bottom: 0;
    left: 20%;
    top: 0vw;
    position: absolute; */
  width: 80%;
  padding: 1vw;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.main .category {
  /* padding-top: 6.7vw; */
  width: 100%;
}

.main .category h2 {
  padding: 1vw;
}

.main .category hr {
  border: none;
  border-top: .1vw solid #cfab53;
  width: 50%;
  margin-left: 1vw;
  margin-bottom: 1vw;
}

.main .category .products {
  display: flex;
  flex-wrap: wrap;
}

.main .category .products .card {
  width: 30%;
  margin: 1vw;
  padding: 1vw;
  /* border: 1px solid #cfab53; */
  position: relative;
  min-height: 28vw;
}

.main .category .products .card .prodimg img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #cfab53;
  min-height: 20vw;
}

.main .category .products .card .prodimg img.primary {
  z-index: 1;
}

.main .category .products .card .prodimg:hover img.primary {
  display: none;
}

.main .category .products .card .desc {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 2vw;
}

.main .category .products .card .desc h3 a:hover {
  color: #cfab53;
}

.main .category .products .card .type {
  display: flex;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  align-items: center;
}

.main .category .products .card .type .border {
  border-radius: 10000px;
  border: 1px solid #bdbdbd;
  padding: 2px;
  margin-right: 5px;
}

.main .category .products .card .type .border .color {
  border-radius: 10000px;
  width: 13px;
  height: 13px;
  background-color: #cfab53;
}

.footer.container {
  /* position: absolute;
    bottom: 0;
    left: 0;
    right: 0; */
  width: 100%;
  border-top: 1px solid #cfab53;
  background-color: white;
}

.footer .top {
  display: flex;
  padding: 1vw;
  justify-content: space-between;
  align-items: flex-start;
}

.footer .top .column {
  width: 25%;
  padding: 1vw;
}

.footer .top .column h1 {
  font-size: 23px;
  letter-spacing: -2px;
  padding: .5vw;
}

.footer .top .column p {
  letter-spacing: -1px;
  font-size: 15px;
}

.footer .top .column a {
  letter-spacing: -1px;
  font-size: 15px;
}

.footer .top .column a:hover {
  color: #cfab53;
}

.footer .logo {
  padding: 1vw 2vw 0vw;
}

.footer .logo h1 {
  font-family: 'GFS Didot', serif;
  color: #cfab53;
  font-size: 35px;
  letter-spacing: normal;
  cursor: pointer;
}

.footer .top .site h3 {
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  font-weight: 400;
}

.footer .top .site p {
  font-size: 15px;
  padding: 1vw 0vw;
  font-weight: 600;
  letter-spacing: normal;
}

.footer .top .customer ul li {
  padding: .3vw .5vw;
}

.footer .top .customer ul li a {
  letter-spacing: -1px;
  font-size: 15px;
}

.footer .top .contact p,
.footer .top .contact a {
  padding: .3vw .5vw;
}

.footer .top .contact .email {
  display: flex;
  flex-direction: column;
}

.footer .top .sign p {
  padding: .5vw 0;
}

.footer .top .sign .input {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border: 1px solid #cfab53;
  margin: 1vw 0vw;
}

.footer .top .sign .input .fa-envelope {
  color: #cfab53;
  padding: 0vw 0vw 0vw .5vw;
  width: 10%;
}

.footer .top .sign .input input {
  border: none;
  padding: 0vw .5vw;
  margin: 0vw 0vw 0vw 0vw;
  width: 80%;
}

.footer .top .sign .input i.fa-chevron-right {
  background-color: #cfab53;
  color: white;
  padding: 5px;
  width: 10%;
  text-align: center;
  cursor: pointer;
}

.footer .top .sign .input i.fa-chevron-right:hover {
  background-color: #bb9c4d;
}

.footer .bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer .socials {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer .socials * {
  padding: .5vw;
  font-size: 12px;
  letter-spacing: -1px;
}

.footer .socials a:hover {
  color: #cfab53;
}

.footer .socials .icons i {
  font-size: 18px;
  font-weight: 700;
}

.footer .socials .icons i.fa-instagram:hover {
  color: #bc2a8d;
}

.footer .socials .icons i.fa-pinterest:hover {
  color: #bd081c;
}

.footer .socials .icons i.fa-twitter:hover {
  color: #1DA1F2;
}
<section class="trueContainer">
  <div class="sidebar container">
    <div class="inner">
      <div class="categories">
        <h5><a href="./product-display-bracelets-and-anklets.html">Bracelets + Anklets</a></h5>
        <p><a href="#bracelets">Bracelets</a></p>
        <p><a href="#chain">Chain Bracelets</a></p>
        <p><a href="#cuff">Cuffs And Bangles</a></p>
        <p><a href="#zodaic">Zodiac Bracelets</a></p>
        <p><a href="#mens">Men's Bracelets</a></p>
        <p><a href="#anklets">Anklets</a></p>
      </div>
      <div class="categories">
        <h5><a href="./product-display-wedding.html">Wedding</a></h5>
      </div>
      <div class="categories">
        <h5><a href="./product-display-mens.html">Men's</a></h5>
      </div>
    </div>
  </div>

  <div class="main container">
    <div id="bracelets" class="category container">
      <h2>Bracelets</h2>
      <hr>
      <div class="products">
        <div class="card">
          <div class="prodimg">
            <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
            <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
          </div>
          <div class="desc">
            <h3><a>Circle Bracelet</a></h3>
            <p>$120.00</p>
          </div>
          <div class="type">
            <div class="border">
              <div class="color"></div>
            </div>
            <p>14k Yellow Gold</p>
          </div>
        </div>
        <div class="card">
          <div class="prodimg">
            <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
            <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
          </div>
          <div class="desc">
            <h3><a>Circle Bracelet</a></h3>
            <p>$120.00</p>
          </div>
          <div class="type">
            <div class="border">
              <div class="color"></div>
            </div>
            <p>14k Yellow Gold</p>
          </div>
        </div>
        <div class="card">
          <div class="prodimg">
            <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
            <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
          </div>
          <div class="desc">
            <h3><a>Circle Bracelet</a></h3>
            <p>$120.00</p>
          </div>
          <div class="type">
            <div class="border">
              <div class="color"></div>
            </div>
            <p>14k Yellow Gold</p>
          </div>
        </div>
        <div class="card">
          <div class="prodimg">
            <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
            <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
          </div>
          <div class="desc">
            <h3><a>Circle Bracelet</a></h3>
            <p>$120.00</p>
          </div>
          <div class="type">
            <div class="border">
              <div class="color"></div>
            </div>
            <p>14k Yellow Gold</p>
          </div>
        </div>
        <div class="card">
          <div class="prodimg">
            <img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt="">
            <img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt="">
          </div>
          <div class="desc">
            <h3><a>Circle Bracelet</a></h3>
            <p>$120.00</p>
          </div>
          <div class="type">
            <div class="border">
              <div class="color"></div>
            </div>
            <p>14k Yellow Gold</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>

<div id="foot" class="footer container">
  <div class="logo container">
    <h1>κοσμήματα</h1>
  </div>
  <div class="top">
    <div class="site column">
      <h3>Kosmimata jewelry</h3>
      <p>Accessorise yourself with the best there is</p>
    </div>
    <div class="customer column">
      <h1>Customer Care</h1>
      <ul>
        <li><a href="./faq.html#shipping">Shipping & Returns</a></li>
        <li><a href="./order-status.html">Order Status</a></li>
        <li><a href="./faq.html#payment">Payment Methods</a></li>
        <li><a href="./ring-sizer.html">Ring Sizer</a></li>
      </ul>
    </div>
    <div class="contact column">
      <div class="address">
        <h1>Visit</h1>
        <p>1985 Bel Meadow Drive,</p>
        <p>Los Angeles, California</p>
        <p>90017</p>
      </div>
      <div class="email">
        <a href="mailto:info@kosmimata.com">info@kosmimata.com</a>
        <a href="tel:+1 213-829-0743">213-829-0743</a>
      </div>
    </div>
    <div class="sign column">
      <p>Sign up to have insider info on new arrivals, early access and more.</p>
      <div class="input">
        <i class="far fa-envelope"></i>
        <input type="email" placeholder="Your Email">
        <i class="fas fa-chevron-right"></i>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="socials">
      <a href="./terms&conditions.html">Terms and Conditions</a>
      <a href="./privacy-policy.html">Privacy Policy</a>
      <a href="./sitemap.html">Site Map</a>
      <p>&copy;Kosmimata Inc.</p>
      <div class="icons">
        <a href=""><i class="fab fa-instagram"></i></a><a href=""><i class="fab fa-pinterest"></i></a><a href=""><i class="fab fa-twitter"></i></a>
      </div>
    </div>
  </div>
</div>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading