我正在尝试将一些jQuery代码移植到纯JavaScript中。当前的jQuery代码在用户向下滚动到data-page-scrolled-offset
body元素中data
属性中设置的特定偏移量时,会切换body
元素中的is-page-scrolled
类。如果用户再次向上滚动到页面顶部,该类将被关闭。
我的工作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代码没有按预期工作,因为当用户在页面中向下滚动时,它会间歇性地打开和关闭类。
我做错了什么?
1条答案
按热度按时间lb3vh1jj1#
对当前问题的解释,摘自我的评论:
jQuery的
toggleClass()
正在根据scroll_top > scrolled_page_offset
设置类的开/关。每次scroll_top > scrolled_page_offset
为true
时,if
+toggle()
都会反转类的开/关状态。如果我们比较“类是否存在”和“我们是否希望类存在”,我们就避免了意外地反转类的状态。
如果这个例子我已经补充:
它只会在我们希望类发生变化时运行
if
。(In在本演示中,背景将变为绿色以显示添加了类)
第一个