Question

所以我有这个jQuery函数，在滚动了600px的视口高度后，为一个元素添加/删除了一个CSS类。

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

我想调整它而不是基于像素值进行工作，它取决于视图高度css测量＆＃34; VH＆＃34;，但在这种情况下，等效结果是重要的

Answer 1

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

例如，假设您需要更多地滚动屏幕的一半（高度为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 2

使用窗口高度的百分比进行比较

$(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");
    }
});

甚至更好的是仅在调整窗口大小时更新某些变量以避免一直计算

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

Answer 3

尝试这样的事情

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

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

Answer 4

要检索视口高度，可以使用$（window）.innerHeight（）：

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

希望这有帮助。

利奥。

Jquery在＆＃39; X＆＃39;之后添加CSS类。滚动视口高度的数量

4 个答案: