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

所以我有这个jQuery函数，在浏览窗口高度已经滚动600px后向元素添加/删除CSS类。Jquery在'X'视口高度滚动之后添加CSS类

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

我想工作的基础断的像素值来调整它，以便代替，它工作过的观点高度的CSS测量“VH”，但相同的结果是在这种情况下，什么事。

来源

2016-10-22 Sam Assoum

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

视口相对灵活的数量，600px的值在这个意义上是任意的，我宁愿用基于百分比的值替换它，所以它响应地缩放，我想在触发20％或40％的视口后触发这个阈值。我想我可以用不同的方法使用锚定div，但我想知道这是否可能首先。 –

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

来源

2016-10-22 15:53:20 kukkuz

真棒，非常感谢！ –

尝试这样的事情

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

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

来源

2016-10-22 15:42:14

对于retrieveing视口的高度，你可以使用$（窗口）.innerHeight（）：

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

希望这有助于。

狮子座。

来源

2016-10-22 15:46:12 Leo

但是，这仍然是一个固定的像素量正确的工作？ –

更正后，视口高度将始终保持不变，滚动时不会更改视口高度，但在此您每次检查卷轴时都会检查视口高度。 – Leo

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

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

来源

2016-10-22 15:53:27

不错非常有用的感谢！ –

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

回答

相关问题