导航更改背景在滚动位置的粘性位置

Question

我希望 <nav> 固定为 3 个数字。当它到达绿色方块时，它应该越过数字并保持不动并变成红色。当你回到顶部时，它应该回到原来的位置并变回绿色。我将如何实现这一目标？

.container {
  height: 1000px;
}

nav{
  display: flex;
  justify-content: space-around;
}

.square{
  background-color: green;
  width: 100px;
  height: 100px;
  margin: auto;
  display: block;
  position: sticky;
}

<div class="container">
  <header>
    <nav>
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </nav>
  </header>
  <div class="square"></div>
</div>

Answer 1

改变背景颜色，需要在animation方式中寻找，但是，根据定位，需要添加类似top: 0的东西来设置你的组件将处于什么位置 sticky.

Answer 2

您可以使用 javascript to detect scroll and use window.onscroll to add sticky class to your element, also note that when using sticky CSS attribute value for display you should also adjust the location, I used calc 来计算左值，这里是一个工作片段：

window.onscroll = function() {myFunction()};

var header = document.querySelector(".square");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

.container {
  height: 10000px;
}

nav {
  display: flex;
  justify-content: space-around;
}

.square {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: auto;
  display: block;
}

.sticky {
  position: fixed;
  top: 0;
  background-color:red;
  left: calc((100% - 100px)/2);
}

.sticky + .content {
  padding-top: 102px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container">
  <header>
    <nav>
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </nav>
  </header>


  <div class="square"></div>

</div>
</body>
</html>

导航更改背景在滚动位置的粘性位置

Sticky position of nav change background at scroll position

javascript

css

navigation

sticky

nav