如何在100vh滚动后切换类

How to toggle class after 100vh scroll

本文关键字：滚动 100vh      更新时间：2023-09-26

如何使此函数在滚动100vh后添加类
目前它在850px之后添加了类。

$("document").ready(function($){
    var nav = $('#verschwinden');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 850) {
            nav.addClass("doch");
        } else {
            nav.removeClass("doch");
        }
    });
});

在纯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>

相关文章：