javascript - Jquery在 'X'滚动的视口(viewport)高度量后添加CSS类

Question

所以我有这个 jQuery 函数，可以在滚动 600px 的视口(viewport)高度后向元素添加/删除 CSS 类。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll >= 600) {
        $(".cta_box").addClass('fadeout');
    } else {
        $(".cta_box").removeClass('fadeout');
    }
});

我想调整它，这样它就不再基于像素值工作，而是根据 View 高度 CSS 测量“VH”工作，但在这种情况下，等效的结果才是重要的。

Answer 1

可以通过使用$(window).height()获取window高度来完成。

例如，假设您必须再滚动一半屏幕(高度为 150vh)，并且必须检测何时滚动了 40%:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll >= 0.4 * $(window).height()) {
        $(".cta_box").addClass('fadeout');
    } else {
        $(".cta_box").removeClass('fadeout');
    }
});

body{
  margin: 0;
  height: 150vh;
}
.cta_box {
  height: 100%;
  background: green;
}
.cta_box.fadeout {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cta_box"></div>