如何在页脚出现时让我的固定侧边栏向上滚动

Question

我的问题是，页脚进入视口后，侧边栏不应固定。

我发现了很多关于固定边栏的问题，但我在这里找到的答案并没有解决我的问题。

我发现了类似的东西 here 但我的问题是，我无法应用此解决方案，因为我的 HTML 结构不同。如果您的答案是纯 js 而不是 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>0.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>0.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>0.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>0.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>0.00</p>
        </div>
        <div class="type">
          <div class="border">
            <div class="color"></div>
          </div>
          <p>14k Yellow Gold</p>
        </div>
      </div>
    </div>
  </div>
  <div id="chain" class="category container">
    <h2>Chain 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>0.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>0.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>0.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>0.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>0.00</p>
        </div>
        <div class="type">
          <div class="border">
            <div class="color"></div>
          </div>
          <p>14k Yellow Gold</p>
        </div>
      </div>
    </div>
  </div>
  <div id="cuff" class="category container">
    <h2>Cuffs And Bangles</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>0.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>0.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>0.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>0.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>0.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>

Answer 1

看起来您正试图让边栏跟随内容，直到内容不够 space，然后它锁定到位。你可以用 JS 做到这一点，但使用 CSS position:sticky;

会容易得多

这是 MDN 的文档

置顶

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;

您需要调整 HTML 以便侧边栏和主要内容位于同一个容器中，这样才能正常工作。我也进行了一些 CSS 更改。

试试这个：

.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>0.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>0.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>0.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>0.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>0.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>

Answer 2

您会想要将边栏移到主要内容中。这样，您就可以使用 position: sticky; top: 0;。我添加了一些其他样式来定位您的内容。这是您要找的吗？

:root {
  --nav-height: 150px;
}

html {
    scroll-behavior: smooth;
}

body {
  margin: 0;
}

nav {
  position: fixed;
  height: var(--nav-height);
  width: 100%;
  background: lightcoral;
  text-align: center;
  font-size: 40px;
  z-index: 1;
}

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: var(--nav-height);
  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 {
  position: relative;
  width: 100%;
  padding: var(--nav-height) 1vw 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;
}

<nav>I AM YOUR TOP NAV</nav>
<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>0.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>0.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>0.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>0.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>0.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>

如何在页脚出现时让我的固定侧边栏向上滚动

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

html

javascript

css

css-position

置顶

试试这个：