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

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

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

ul,
ol {
  list-style: none;
  font-family: 'Montserrat', sans-serif;
}

.menu.container {
  padding: 1vw;
  font-family: 'Montserrat', sans-serif;
}

.menu ul li {
  display: inline-block;
  padding: 1vw;
}

.menu ul li a {
  padding: 1vw;
  font-size: 1.3vw;
}

.menu ul li a:hover {
  border-bottom: .2em solid black;
}

.title.container {
  width: 100%;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  /* border-top: 1px solid #cfab53; */
  border-bottom: 1px solid #cfab53;
  z-index: 2;
  /* margin-top: 2vw; */
  /* box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58); */
}

.title .logo {
  padding: 1vw;
}

.title .logo h1 {
  font-family: 'GFS Didot', serif;
  color: #cfab53;
  font-size: 2.5vw;
  cursor: pointer;
}

.title .logo h3 {
  font-family: 'Dancing Script', cursive;
  /* color: #a1919e; */
  font-size: 1.3vw;
  font-weight: 400;
}

.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="title container" id="menu">
  <div class="logo container">
    <h1>κοσμήματα</h1>
    <h3>kosmimata jewelry</h3>
  </div>
  <div class="menu container">
    <ul>
      <li><a href="../pages/index.html">Home</a></li>
      <li><a id="shop">Shop</a></li>
      <li><a href="../pages/blog.html">Blog</a></li>
      <li><a id="search"><i class="fas fa-search"></i></a></li>
      <li><a id="cart"><i class="fas fa-shopping-cart"></i></a></li>
    </ul>
  </div>
</div>
<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:[email protected]">[email protected]</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>

CodePudding user response：

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:[email protected]">[email protected]</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>

CodePudding user response：

You're going to want to move your sidebar into your main content. That way, you can use position: sticky; top: 0;. I added a few other styles to position your content. Is this what you're looking for?

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

.sidebar.container {
  position: sticky;
  align-self: flex-start;
  width: 20%;
  top: 0;
  z-index: 1;
  text-transform: uppercase;
  padding: 1vw;
}

.sidebar .inner .categories * {
  padding: 0.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 {
  width: 100%;
  padding: 1vw;
  z-index: 0;
  display: flex;
}

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

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

.main .category hr {
  border: none;
  border-top: 0.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: 0.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: 0.3vw 0.5vw;
}

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

.footer .top .contact p,
.footer .top .contact a {
  padding: 0.3vw 0.5vw;
}

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

.footer .top .sign p {
  padding: 0.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 0.5vw;
  width: 10%;
}

.footer .top .sign .input input {
  border: none;
  padding: 0vw 0.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: 0.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="main container">
  <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 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:[email protected]">[email protected]</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>