jquery 如何创建一个福尔斯上到下的导航部分？

e37o9pze 于 2023-06-29 发布在 jQuery

关注(0)|答案(2)|浏览(115)

当我通过单击按钮打开导航时，header-overflow的高度会发生变化，因为它是以百分比表示的。此外，header-overflow中的链接的间距不均匀。
我尝试了display: flex; flex-direction: column; place-content: space-evenly;，但是在header-overflow中的链接不能完美地滚动。
我想创建一个导航部分，从上到下下降，而不推下面的内容（* 覆盖在他们 *）。这四个链接应该是等距的，当它缩小时有一个滚动条。

$(document).ready(function() {
  $("li.third-link a").click(function() {
    if ($("li.third-link a").hasClass("opened-nav")) {
      $("li.third-link a").removeClass("opened-nav");
      $("div#header-overflow").css("display", "none");
    } else {
      $("li.third-link a").addClass("opened-nav");
      $("div#header-overflow").css("display", "block");
    }
  });
});

body {
  margin: 0;
}

div#header {
  background: #f1f1f1;
  box-shadow: 0 2px 14px #ccc;
  position: sticky;
  top: 0;
  padding: 10px 5px;
}

div#header ul {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

div#header ul li.third-link {
  display: flex;
  place-content: flex-end;
  flex: 50%;
}

div#header ul li a {
  font-family: sans-serif;
  text-transform: uppercase;
  color: #000;
  font-size: 18px;
  text-decoration: none;
  padding: 6px 18px;
  display: flex;
}

div#header-overflow {
  display: none;
  height: 91%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #111;
  overflow: auto;
}

div#header-overflow a {
  color: #fff;
  text-decoration: none;
  padding: 15px 25px;
  font-size: 28px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  height: 19%;
}

section {
  padding: 0 15px;
  font-size: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="header">
  <ul>
    <li class="first-link">
      <a href="javascript:void(0);">Link 1</a>
    </li>
    <li class="second-link">
      <a href="javascript:void(0);">Link 1</a>
    </li>
    <li class="third-link">
      <a href="javascript:void(0);">Open nav</a>
    </li>
  </ul>
</div>

<div id="header-overflow">
  <a href="javascript:void(1);">Link 1</a>
  <a href="javascript:void(2);">Link 2</a>
  <a href="javascript:void(3);">Link 3</a>
  <a href="javascript:void(4);">Link 4</a>
</div>

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

jquery

来源：https://stackoverflow.com/questions/76571041/how-to-create-a-navigation-section-that-falls-from-top-to-bottom

2条答案

按热度按时间

gjmwrych1#

尝试添加overflow-y:scroll;
Edit =如果你的隐藏div在position:absolute上，你必须把你的header的确切高度放在这里：top:53px;

$(document).ready(function(){
 $("li.third-link a").click(function(){
  if($("li.third-link a").hasClass("opened-nav")) {
   $("li.third-link a").removeClass("opened-nav");
   $("div#header-overflow").css("display", "none");
  } else {
   $("li.third-link a").addClass("opened-nav");
   $("div#header-overflow").css("display", "block");
  }
 });
});

body {margin: 0;}

div#header {
 background: #f1f1f1;
 box-shadow: 0 2px 14px #ccc;
 position: sticky;
 top: 0;
 padding: 10px 5px;
}

div#header ul {
 display: flex;
 align-items: center;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%;
}

div#header ul li.third-link {
 display: flex;
 place-content: flex-end;
 flex: 50%;
}

div#header ul li a {
 font-family: sans-serif;
 text-transform: uppercase;
 color: #000;
 font-size: 18px;
 text-decoration: none;
 padding: 6px 18px;
 display: flex;
}

div#header-overflow {
 display: none;
 height: 91%;
 width: 100%;
 position: fixed;
 top:53px;
 bottom: 0;
 left: 0;
 background-color: #111;
 overflow: auto;
}

div#header-overflow a {
 color: #fff;
 text-decoration: none;
 padding: 15px 25px;
 font-size: 28px;
 font-family: sans-serif;
 display: flex;
 align-items: center;
 height: 19%;
}

section {
 padding: 0 15px;
 font-size: 25px;
}

<div id="header">
 <ul>
  <li class="first-link">
   <a href="javascript:void(0);">Link 1</a>
  </li>
  <li class="second-link">
   <a href="javascript:void(0);">Link 1</a>
  </li>
  <li class="third-link">
   <a href="javascript:void(0);">Open nav</a>
  </li>
 </ul>
</div>

<div id="header-overflow">
 <a href="javascript:void(1);">Link 1</a>
 <a href="javascript:void(2);">Link 2</a>
 <a href="javascript:void(3);">Link 3</a>
 <a href="javascript:void(4);">Link 4</a>
  <a href="javascript:void(4);">Link 5</a>
  <a href="javascript:void(4);">Link 6</a>
</div>

<section>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

赞(0）回复(0）举报 2023-06-29

wlzqhblo2#

$(document).ready(function(){
 $("li.third-link a").click(function(){
  if($("li.third-link a").hasClass("opened-nav")) {
   $("li.third-link a").removeClass("opened-nav");
   $("div#header-overflow").css("height", "0");
  } else {
   $("li.third-link a").addClass("opened-nav");
   $("div#header-overflow").css("height", "calc(100% - 53px)");
  }
 });
});

body {margin: 0;}

div#header {
 background: #f1f1f1;
 box-shadow: 0 2px 14px #ccc;
 position: sticky;
 top: 0;
 padding: 10px 5px;
}

div#header ul {
 display: flex;
 align-items: center;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%;
}

div#header ul li.third-link {
 display: flex;
 place-content: flex-end;
 flex: 50%;
}

div#header ul li a {
 font-family: sans-serif;
 text-transform: uppercase;
 color: #000;
 font-size: 18px;
 text-decoration: none;
 padding: 6px 18px;
 display: flex;
}

div#header-overflow {
 height: 0;
 width: 100%;
 position: fixed;
 bottom: 0;
 left: 0;
 background-color: #111;
 overflow: auto;
 transition: all 1s;
 display: flex;
 flex-direction: column;
}

div#header-overflow a {
 color: #fff;
 text-decoration: none;
 padding: 15px 25px;
 font-size: 28px;
 font-family: sans-serif;
 display: flex;
 align-items: center;
 flex: auto;
}

section {
 padding: 0 15px;
 font-size: 25px;
}

<div id="header">
 <ul>
  <li class="first-link">
   <a href="javascript:void(0);">Link 1</a>
  </li>
  <li class="second-link">
   <a href="javascript:void(0);">Link 1</a>
  </li>
  <li class="third-link">
   <a href="javascript:void(0);">Open nav</a>
  </li>
 </ul>
</div>

<div id="header-overflow">
 <a href="javascript:void(1);">Link 1</a>
 <a href="javascript:void(2);">Link 2</a>
 <a href="javascript:void(3);">Link 3</a>
 <a href="javascript:void(4);">Link 4</a>
 <a href="javascript:void(4);">Link 5</a>
 <a href="javascript:void(4);">Link 6</a>
</div>

<section>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

赞(0）回复(0）举报 2023-06-29

我来回答

jquery 如何创建一个福尔斯上到下的导航部分？

2条答案

相关问题

热门标签

最新问答