时间戳

首页 > 解决方案 > 开始滚动后，如何将两个导航栏中的第二个保持在顶部？

html - 开始滚动后，如何将两个导航栏中的第二个保持在顶部？

问题描述

我正在创建一个导航栏，其中有两个单独的部分用于联系信息和菜单本身。当我向下滚动时，我希望联系信息正常消失，但菜单会粘在页面顶部，直到当菜单被联系信息向下推时我滚动回顶部。任何帮助表示赞赏。

body {
  margin: 0;
  padding: 0;
}

#navbar {
  width: 100%;
  /* position: fixed; */
}


/*NAVBAR-CONTACT*/

.navbar-contact {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(242, 122, 61, 1);
  width: 100%;
  list-style-type: none;
}

.navbar-contact li {
  padding: 10px 16px;
  float: right;
}

.navbar-contact li:first-child {
  padding-right: 25%;
}

.navbar-contact li a {
  display: block;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  text-decoration: none;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
}

.navbar-contact li a:hover {
  text-decoration: underline;
}


/*NAVBAR-MENU*/

.navbar-menu {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(33, 33, 33, 0.8);
  list-style-type: none;
  text-align: center;
  position: fixed;
  width: 100%;
}

.navbar-menu li {
  display: inline-block;
}

.navbar-menu li a {
  display: block;
  color: rgb(190, 190, 190);
  text-align: center;
  text-decoration: none;
  font-family: Verdana, Tahoma, sans-serif;
  font-weight: 900;
  font-size: 16px;
  padding: 20px 16px;
}

.navbar-menu li a:hover {
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

#content {
  margin: 0;
  padding: 80px 60px 0 60px;
  height: 300vh;
}
<!DOCTYPE html>
<html>

<head>
  <title>Website</title>
  <link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
  <!-- Navbar -->
  <nav id="navbar">
    <ul class="navbar-contact">
      <li><a href="#">info@domain.co.uk</a></li>
      <li><a href="#">(XXX) XXXX XXXX</a></li>
    </ul>
    <ul class="navbar-menu">
      <li><a href="#">About</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Clients</a></li>
    </ul>
  </nav>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</body>

</html>

标签： htmlcss

解决方案

最简单的方法是在 css 中使用 position:sticky;

这是 w3schools ( https://www.w3schools.com/howto/howto_css_sticky_element.asp )的示例：

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

编辑：粘性元素相对于它们的父元素是粘性的。您的 navbar-menu 位于您的 nav 元素内，因此只有当您的 nav 在屏幕中时它才会可见。您应该能够保持您的样式几乎相同，只需将您的 navbar-menu 移到您的 nav 元素之外，如下所示：

<!-- Navbar -->
<nav id="navbar">
    <ul class="navbar-contact">
        <li><a href="#">info@domain.co.uk</a></li>
        <li><a href="#">(XXX) XXXX XXXX</a></li>
    </ul>
</nav>
<ul class="navbar-menu" style="position: sticky;">
    <li><a href="#">About</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">Clients</a></li>
</ul>

然后只需将上面的 css 添加到您的导航栏菜单中，如下所示：

/*NAVBAR-MENU*/

.navbar-menu {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(33, 33, 33, 0.8);
  list-style-type: none;
  text-align: center;
  width: 100%;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

（请注意，我删除了位置：固定；）

推荐阅读