当页脚出现时，如何使我的固定侧边栏向上滚动

【问题标题】：How do I make my fixed sidebar scroll up as the footer comes up当页脚出现时，如何使我的固定侧边栏向上滚动
【发布时间】：2022-01-12 16:02:06
【问题描述】：

我的问题是，一旦页脚进入视口，侧边栏不应该被修复。

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

我发现了类似的东西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>$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 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>$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 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>$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>

【问题讨论】：

    标签： javascript html css css-position


    【解决方案1】：

    您似乎正试图让侧边栏跟随内容，直到没有足够的空间，然后它锁定到位。你可以用 JS 做到这一点，但使用 CSS position:sticky; 会容易得多

    这里是 MDN 的文档

    粘性

    元素按照文档的正常流程定位，然后相对于其最近的滚动祖先和包含块（最近的块级祖先）偏移，包括与表格相关的元素，根据top、right的值、底部和左侧。偏移量不会影响任何其他元素的位置。

    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>$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>

    【讨论】：

    • 这确实很有帮助，但是仍然存在问题。我在顶部有一个固定的标题栏，所以当我点击页面内的链接时，标题隐藏在这个标题栏后面。有没有办法解决它而不必添加多余的填充或边距？
    • 当您使用position:fixed; 时，该元素浮动在视口上而不是在文档中。当我有一个位置固定的浮动导航时，我确保导航具有固定的高度，然后将margin-top: navHeight; 添加到正文。这样，当您滚动到页面顶部时，导航不会干扰其余内容。如果我没有正确理解，请告诉我。
    • 解决此问题的另一种方法是创建一个脚本，该脚本利用滚动事件侦听器并查找window.pageYOffset，然后有一个添加或删除浮动类的条件。如果window.pageYOffset > 100 添加浮动类否则删除浮动类。
    • 问题不仅仅在于顶部。如果您再次运行我的代码 sn-p 并单击子链接链或袖口，您会看到标题隐藏在标题栏后面。我想解决它而不给每个类别容器多余的边距。
    【解决方案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>$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>

    【讨论】：

    • 是的，非常感谢。但是，我在顶部有一个固定的标题栏，所以当我点击页面中的链接时，标题隐藏在这个标题栏后面。有什么方法可以解决它而无需添加多余的填充或边距？
    • 您可以将标题栏高度的顶部值添加到采用position: sticky 的元素。类似top: 150px
    • 问题不仅仅出在顶部。如果您再次运行我的代码 sn-p 并单击子链接链或袖口，您会看到标题隐藏在标题栏后面。我想在不给每个类别容器多余的 margin-top 的情况下解决它。
    • 对不起，我不确定你的意思。
    猜你喜欢
    • 2021-06-19
    • 1970-01-01
    • 1970-01-01
    • 2015-10-06
    • 2015-09-23
    • 1970-01-01
    • 2021-02-18
    • 2021-05-28
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode