100vh 滚动后如何切换类

Question

如何让这个函数在滚动后添加类

100vh

?
目前它在

850px

之后添加了课程。

$("document").ready(function($){
    var nav = $('#verschwinden');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 850) {
            nav.addClass("doch");
        } else {
            nav.removeClass("doch");
        }
    });
});

Answer 1

在纯 JavaScript 中，使用

window.innerHeight

获取视口高度，使用

elScrollable.scrollTop

获取元素的 scrollTop。
使用

classList.toggle("className", statement)

切换课程：

const elScrollable = document.querySelector("html")
const elNav = document.querySelector("#nav");

const handleNav = () => {
  const viewportHeight = window.innerHeight;
  const scrollTop = elScrollable.scrollTop;
  elNav.textContent = `Scrolled: ${scrollTop / viewportHeight}`
  elNav.classList.toggle("is-active", scrollTop >= viewportHeight);
};

addEventListener("scroll", handleNav)
addEventListener("resize", handleNav)
handleNav();

* {
  box-sizing: border-box;
  margin: 0;
}

#nav {
  position: sticky;
  top: 0;
  background: silver;
}

#nav.is-active {
  background: gold;
}

<nav id="nav">NAV</nav>
<p style="min-height: 300vh">
  scroll down until #nav becomes golden...
</p>

使用 jQuery，使用

$(window).height()

获取视口高度，使用

$scrollable.scrollTop()

获取滚动 HTML（或任何其他）元素的程度。
使用

.toggleClass("className", statement)

切换课程：

const $window = $(window);
const $scrollable = $("html");
const $nav = $("#nav");

const handleNav = () => {
  const viewportHeight = $window.height();
  const scrollTop = $scrollable.scrollTop();
  $nav
    .text(`Scrolled: ${scrollTop / viewportHeight}`)
    .toggleClass("is-active", scrollTop >= viewportHeight);
};

$window.on("scroll", handleNav)
$window.on("resize", handleNav)
handleNav();

* {
  box-sizing: border-box;
  margin: 0;
}

#nav {
  position: sticky;
  top: 0;
  background: silver;
}

#nav.is-active {
  background: gold;
}

<nav id="nav">NAV</nav>
<p style="min-height: 300vh">
  scroll down until #nav becomes golden...
</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>