javascript - 布局改变后如何使用CSS保持下方黄色块和黑色块之间10px的间距？

Question

我是自学编程的，我的英语不是很好！但是有一个问题，我还是试着描述一下我遇到的问题，希望有人能帮帮我。

目前我已经实现了当鼠标滚动到指定位置时，布局发生了转换，但是我希望当我切换到黄色布局时，黄色块仍然可以与下面的黑色块预留10px的距离，但是我一直在nav2，也就是黄色的Margin-bottom:10px设置在block里；不知道为什么不能渲染效果！

有人能告诉我应该在哪里设置吗？还是我的 CSS 概念错了？

感谢你们对我的帮助。我要感谢大家对这个问题的关注。

$(document).scroll(function(){
    var scrollH=$(document).scrollTop();
    if(scrollH > 60){
      $('.nav').addClass('up');
      $('.nav2').addClass('down');
    }else if(scrollH < 90){
       $('.nav').removeClass('up');
       $('.nav2').removeClass('down');
    }
})

.header {
  padding: 10px;
  text-align: center;
  height: 60px;
  background-color: red;
  color: #fff;
  font-size: 60px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.nav2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #e5d549;
  color: #222;
  padding: 20px;
  position: fixed;
  top: 80px;
  left: 0px;
  right: 0px;
  opacity: 0;
  margin-bottom: 10px;
}
.nav2.down {
  -webkit-animation: fadeIn 1s forwards;
          animation: fadeIn 1s forwards;
}
.nav2 .breadcrumb {
  display: flex;
}
.nav2 .breadcrumb .item::after {
  content: ">";
  padding: 0px 8px;
}
.nav2 .breadcrumb .item::after:last-child {
  display: none;
}
.nav2 .search {
  display: flex;
  align-items: center;
  border: 1px solid #222;
  padding: 3px;
  order: 3;
}
.nav2 .search .fas {
  color: #fff;
  padding: 6px;
}
.nav2 .search .btn {
  display: inline-block;
  padding: 2px;
  text-decoration: none;
  background-color: #e5d549;
  color: #222;
  border-radius: 4px;
  margin-left: 3px;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #1768ac;
  padding: 20px;
  z-index: -1;
  margin-bottom: 10px;
}
.nav.up {
  -webkit-animation: fadeout 1s forwards;
          animation: fadeout 1s forwards;
}
.nav .filter {
  display: flex;
  width: 100%;
  order: 1;
  color: #fff;
  padding-left: 10px;
  padding-bottom: 20px;
}
.nav .filter .item {
  margin: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #fff;
}
.nav .category {
  display: flex;
  order: 2;
}
.nav .category .item {
  color: #fff;
  margin-left: 20px;
}
.nav .search {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 3px;
  order: 3;
}
.nav .search .fas {
  color: #fff;
  padding: 6px;
}
.nav .search .btn {
  display: inline-block;
  padding: 2px;
  text-decoration: none;
  background-color: #e5d549;
  color: #222;
  border-radius: 4px;
  margin-left: 3px;
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.content {
  padding: 20px;
  background-color: #222;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="header">LOGO</div>


<div class="nav">
  <ul class="filter">
    <li class="item">HOT</li>
    <li class="item">NEW</li>
 </ul>
  <ul class="category">
    <li class="item">title</li>
    <li class="item">title</li>
    <li class="item">title</li>
    <li class="item">title</li>
    <li class="item">title</li>
    <li class="item">title</li>
  </ul>
  <div class="search">
    <label><i class="fas fa-search"></i></label>
    <input class="search_input" type="text" >
    <a  class="btn" href="javascript:;">BTN</a>
  </div>
</div>

<div class="nav2">
  <ul class="breadcrumb">
    <li class="item">index</li>
    <li class="item">item</li>
    <li class="item">item</li>
  </ul>
   <div class="search">
      <label><i class="fas fa-search"></i></label>
      <input class="search_input" type="text" >
      <a  class="btn" href="javascript:;">BTN</a>
    </div>
</div>
  <div class="content">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.lorem100Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
  </div>
</div>

标签： javascripthtmljquerycss

Answer 1

这种行为是因为 nav2 是一个position:fixed元素。当您提到一个元素为fixed时，它们会从文档流中删除，并根据 top、left、right、bottom 值相对于文档放置。

也就是说，为了实现间隙，您可以将边距放置到下一个元素

.content {
    padding: 20px;
    background-color: #222;
    color: #fff;
    margin-top: 10px;
}