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

Posted 2023-03-06

【中文标题】Jquery在滚动\'X\'视口高度后添加CSS类

【英文标题】：Jquery add CSS class after 'X' amount of viewport height scrolledJquery在滚动'X'视口高度后添加CSS类

【发布时间】：2017-03-04 18:49:19

【问题描述】：

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

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

我想调整它，而不是根据像素值工作，而是根据视图高度 css 测量“VH”工作，但在这种情况下，等效结果才是重要的。

【问题讨论】：

你觉得 600px 应该如何转换成 vh 单位？结果应该是计算出的绝对高度 - 与 px 一样 - 还是应该是视口的相对灵活量？

视口相对灵活量，这里的 600px 值是任意的，我宁愿用基于百分比的值替换它，以便响应地缩放，我希望这个阈值在 20% 或 40 之后触发% 视口已被滚动。我想我可以用不同的方法使用锚 div，但我想先知道这是否可行。

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

要检索视口高度，您可以使用 $(window).innerHeight()：

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

希望这会有所帮助。

狮子座。

【讨论】：

但是在固定像素量下仍然可以正常工作吗？

正确，视口高度将始终相同，滚动时不会改变，但每次滚动发生时您都会检查，然后检查视口高度。

【参考方案4】：

试试这样的

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

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