添加'X'视口高度滚动的数量

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

本文关键字：滚动 视口 添加 高度      更新时间：2023-09-26

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

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

我想调整它，而不是基于像素值工作，它工作的视图高度css测量"VH"，但等效的结果是什么问题在这种情况下。

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

使用窗口高度的百分比来比较

$(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

试试这样

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

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

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

希望对你有帮助。

狮子座。

相关文章：