觸發滾動過去的DOM元素

我試圖觸發用戶滾動到各種DOM元素（我需要這是響應各種屏幕尺寸）的操作。我首先用offset().top得到各個元素的位置，然後我用scrollTop()計算滾動的位置。它在某種程度上起作用，但是該操作在DOM元素開始之前觸發得太遠。我已經刪除了所有填充和利潤...觸發滾動過去的DOM元素

var hT = $('#bioAG').offset().top; 
var hT2 = $('#bioTM').offset().top; 
var hT3 = $('#contact').offset().top; 

$(window).scroll(function() { 
    var ws = $(window).scrollTop()   
    if (ws > hT) { 
    $("#bioAG").addClass("fade-in"); 
     } else if (ws > hT2){ 
     $("#bioTM").addClass("fade-in"); 
     } else if (ws > hT3) { 
      $("#contact").addClass("fade-in"); 
      } else {console.log('none');};

}）`

來源

2016-09-21 eabates

邏輯上滾動（每過一段時間），你應該重新計算你的變量.... –

我想我努力理解爲什麼會出現這種情況如果視口沒有調整大小。爲什麼DOM元素的位置在頁面第一次被調用時已經存在時會發生改變？ – eabates

原因：1：你滾動頁面，2：調整窗口的大小，3：滾動和JS現在搞砸了（嗯...除非你的元素總是在固定的NNpx高度 - 這我想是不太可能。） –

在滾動（負載和調整）計算每data-fadein元素.top位置。
filter()然後返回頂部位置小於窗口高度的元素 - 並在該元素上添加期望的類。

var $ele = $("[data-fadein]"), 
 
    $win = $(window); 
 

 
function fadeInEl() { 
 

 
    var h = $win.height(); 
 

 
    $ele.filter(function() { 
 
    return this.getBoundingClientRect().top < h; 
 
    }).addClass("fade-in"); 
 

 
} 
 

 

 
// Call the above function on: 
 
$win.on("load resize scroll", fadeInEl);

*{box-sizing:border-box;} 
 
html,body{height:100%;margin:0;} 
 

 

 
[data-fadein] { 
 
    height:100vh; 
 
    opacity:0; 
 
    transition: 2s; 
 
} 
 
.fade-in { 
 
    opacity:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div data-fadein id="bioAG" style="background:#0af">ag</div> 
 
<div data-fadein id="bioTM" style="background:#f0a">tm</div> 
 
<div data-fadein id="contact" style="background:#0fa">contact</div>

https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect

來源

2016-09-21 20:25:54

感謝您的漂亮代碼。它的效果非常好，一直到移動斷點，我認爲100vh和不同文本長度的div是主要障礙（我打算嘗試使所有div文本更加統一）。但是，這段代碼確實讓我走上了一條更好的軌道，並且我學到了一些可以引導的新東西。 – eabates

@eabates div大小將是最好的100vh，但它可以更高，它並不重要。 - 我現在看到一個問題，談論高度...將在一分鐘內編輯 –

好吧，我會嘗試調整100vh與媒體查詢，謝謝。 – eabates

觸發滾動過去的DOM元素

回答

相關問題