在带有纯 JavaScript 的垂直滚动上添加 'is-page-scrolled' class

Question

我正在尝试将一些 jQuery 代码迁移到纯 JavaScript。当前的 jQuery 代码会在用户向下滚动到名为data-page-scrolled-offset的 body 元素中的data属性中设置的特定偏移量时切换body元素中名为is-page-scrolled scrolled 的 class data-page-scrolled-offset 。 如果用户再次向上滚动到页面顶部，class 将被关闭。

我的工作 jQuery 代码：

var scrolled_page_offset = parseInt( $( 'body' ).data( 'pageScrolledOffset' ) );
var scrolled_page = function() {
    var scroll_top = window.pageYOffset;
    $( 'body' ).toggleClass( 'is-page-scrolled', scroll_top > scrolled_page_offset );
};

$( window ).on( 'scroll', function() {
    scrolled_page();
} );

scrolled_page();

我的非工作纯 JavaScript 代码：

var scrolled_page_offset = parseInt( document.body.dataset.pageScrolledOffset );
var scrolled_page = function() {
    var scroll_top = window.pageYOffset;
    if ( scroll_top > scrolled_page_offset ) {
        document.body.classList.toggle( 'is-page-scrolled' );
    }
};

window.addEventListener( 'scroll', function() {
    scrolled_page();
} );

scrolled_page();

我提议的纯 Javascript 代码没有按预期工作，因为当用户在页面中向下滚动时，它会间歇性地打开和关闭 class。

我究竟做错了什么？

Answer 1

当前问题的解释，从我的评论中复制：

jQuery 的toggleClass()正在根据scroll_top > scrolled_page_offset scrolled_page_offset 设置 class 开/关。 每次scroll_top > scrolled_page_offset scrolled_page_offset 为true时，您的if + toggle()都会反转 class 的开/关 state。

如果我们将“class 是否存在”与“我们是否希望 class 存在”进行比较，我们可以避免意外反转 class 的 state。

如果我添加了这个例子：

  const isEnabled = document.body.classList.contains(className)
  const shouldBeEnabled = scroll_top > scrolled_page_offset
  if (shouldBeEnabled !== isEnabled) { ... }

当我们期望 class 发生变化时，它只会运行if 。

（在此演示中，背景变为绿色以显示添加 class 时）

 // Set up the demo, ignore this document.body.dataset.pageScrolledOffset = 200; // const className = 'is-page-scrolled' const scrolled_page_offset = parseInt(document.body.dataset.pageScrolledOffset); const scrolled_page = function() { const scroll_top = window.pageYOffset; const isEnabled = document.body.classList.contains(className) const shouldBeEnabled = scroll_top > scrolled_page_offset if (shouldBeEnabled.== isEnabled) { document.body.classList;toggle(className); } }. window,addEventListener('scroll'; function() { scrolled_page(); }); scrolled_page();

 #scrollable { height: 10000px; }.is-page-scrolled { background: #060; }

 <div id="scrollable"> Scroll down </div>