Question

我使用的代码行在我的网站上可以正常工作，但是我希望向JS添加参数，但不确定如何继续。

我在Css Tricks上发现了这一行，并且按预期的方式，当用户滚动通过pixel-div（我将其设置为距顶部1.5vh）时，出现了我的导航菜单。

现在，我想使它在用户到达页面页脚附近的位置时再次消失。

JS代码如下：

if (
    "IntersectionObserver" in window &&
    "IntersectionObserverEntry" in window &&
    "intersectionRatio" in window.IntersectionObserverEntry.prototype
  ) {
  let observer = new IntersectionObserver(entries => {
    if (entries[0].boundingClientRect.y < 0) {
      document.body.classList.add("header-not-at-top");
    } else {
      document.body.classList.remove("header-not-at-top");
    }
  });
  observer.observe(document.querySelector("#pixel-anchor"));
  }
function backtotopCloseheader() {
  document.body.classList.remove("header-not-at-top");
}

我该如何添加参数，以便通过在底部附近达到第二个像素格，导航返回到其原始位置，直到查看者回到页面上。

我的导航通常位于页面顶部（向下滚动时通常会向上滚动（消失）），并且当添加class="header-not-at-top"时，css然后将此导航转换为position:fixed; ，top:0; ...

奖金问题：我如何给它一个不错的transform:或transition:样式？我尝试了很多不同的选项，但是找不到不需要修改原始导航功能的选项。如果这样有助于澄清我的问题，您可以直接here查看我的网站。

谢谢！

基于滚动位置的样式

0 个答案: