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類

回答

相關問題