HTML/CSS位置粘性工作不正常

Question

我正在尝试制作 div position: sticky; 但它不起作用，这是我的代码：

body {
  height: 1000px;
}

header {
  position: absolute;
  width: 100%;
  z-index: 100;
}

.top-navbar {
  height: 100px;
  background-color: green;
}

nav {
  position: -webkit-sticky !important;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: orange;
}

<header>
  <div class="top-navbar">
    <h2>top navbar</h2>
  </div>
  <nav>
    <h1>My navbar</h1>
  </nav>
</header>

Answer 1

您似乎只想让 nav 在滚动条上可见。在这种情况下，请按以下方式进行。将 sticky 移动到 header 并考虑 top 的负值等于 top-navbar

的高度

body {
  height: 1000px;
}

header {
  position: sticky;
  top: -100px;
}

.top-navbar {
  height: 100px;
  background-color: green;
}

nav {
  background-color: orange;
}


h1,h2 {
  margin:0;
}

<header>
  <div class="top-navbar">
    <h2>top navbar</h2>
  </div>
  <nav>
    <h1>My navbar</h1>
  </nav>
</header>

Answer 2

假设您想让第二个导航固定。

w3schools 上有一个很好的教程：https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

将此应用到您的代码将类似于：

// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  height: 1000px;
}

header {
  position: absolute;
  width: 100%;
  z-index: 100;
}

.top-navbar {
  height: 100px;
  background-color: green;
}

nav {
  position: -webkit-sticky !important;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: orange;
}
  
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

<header>
  <div class="top-navbar">
    <h2>top navbar</h2>
  </div>
  <nav id="navbar">
    <h1>My navbar</h1>
  </nav>
</header>

当然，您可以在没有 JavaScript 的情况下执行此操作，但为了与旧版浏览器兼容，您可能需要考虑此选项。

Answer 3

Temani 有一个很好的解决方案，但我想指出您的解决方案不起作用的原因。位置 sticky 是“相对于其最近的滚动祖先和包含块（最近的 block-level 祖先）”。在你的例子中，那是 header，导航已经固定在上面了。但是，如果将导航移动到 header 下方（如下例所示），您会看到它有效：

body {
  height: 1000px;
}

.top-navbar {
  height: 100px;
  background-color: green;
}

nav {
  position: sticky;
  top: 0;
  background-color: orange;
}

<header>
  <div class="top-navbar">
    <h2>top navbar</h2>
  </div>
</header>

<nav>
  <h1>My navbar</h1>
</nav>

HTML/CSS位置粘性工作不正常

HTML/CSS Position sticky is not working properly

html

css

sticky