Jquery 在 'X' 视口高度滚动后添加 CSS class

Question

所以我有这个 jQuery 函数，可以在滚动视口高度 600 像素后向元素添加/删除 CSS class。

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

我想对其进行调整，而不是基于像素值工作，而是根据视图高度 css 测量值 "VH" 工作，但等效结果才是重要的案例.

Answer 1

尝试这样的事情

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

Answer 2

要获取视口高度，您可以使用 $(window).innerHeight():

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

希望对您有所帮助。

狮子座。

Answer 3

可以通过使用 $(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>

Answer 4

使用window身高的百分比进行比较

$(window).scroll(function() {    
    var height = $(window).height(),
        scroll = $(window).scrollTop()
        limit = 0.6; //implies 60 vh or 60% of viewport height

    if (scroll >= height*limit) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

更好的方法是仅在 window 调整大小时更新一些变量以避免一直计算

var limit = 0.6, //implies 60 vh or 60% of viewport height
    scrollLimit = 0;

$(window).resize(function(){
          scrollLimit = $(window).height() * limit;
       }).scroll(function() {    
          var scroll = $(window).scrollTop(); 

          if (scroll >= scrollLimit ) {
              $(".clearHeader").addClass("darkHeader");
              } else {
              $(".clearHeader").removeClass("darkHeader");
          }
       }).trigger('resize').trigger('scroll'); // trigger both events on start to force initial setup

Jquery 在 'X' 视口高度滚动后添加 CSS class

Jquery add CSS class after 'X' amount of viewport height scrolled

javascript

css

jquery

height

scroll