在js中获得位置[关闭]

Question

嘿，我想用 javascript 制作一个导航栏，在您向下滚动到某个点后将位置更改为固定，并在向上滚动后使其相对。如果我只是修复它，它会弄乱横幅。如何跟踪用户在滚动位置上的位置？

Answer 1

有两种方法可以实现这一点...

1) 纯 CSS

您可以使用position sticky。

body {
  /* ?? Just added, so you can scroll on page */
  height: 200vh;
}

#box {
  margin-top: 80px;
  position: sticky;
  background-color: blueviolet;
  width: 100%;
  height: 80px;
  top: 0;
}

<div id="box"></div>

• position Documentation

---

2) Javascript

这里我们添加了一个滚动事件，当我们滚动时它会被触发。

this.scrollY间接表示window.scrollY，它返回我们滚动条的位置。 box.scrollHeight 返回到达 box 所需的高度。

我们正在比较它们，当它们满足我们的条件时，我们将 .fixed 类添加到 #box。

const box = document.getElementById("box");

window.addEventListener("scroll", () => {
  if (this.scrollY >= box.scrollHeight) box.classList.add("fixed");
  else box.classList.remove("fixed");
});

body {
  /* ?? Just added, so you can scroll on page */
  height: 200vh;
}

#box {
  margin-top: 80px;
  background-color: blueviolet;
  width: 100%;
  height: 80px;
}

#box.fixed {
  margin-top: 0px;
  position: fixed;
  top: 0;
}

<div id="box"></div>

• scroll event Documentation

• scrollY Documentation

• scrollHeight Documentation

---