jQuery檢查元素是否在視口中

Question

我已經嘗試了十幾個庫來實現這種效果，但是我一定在某個地方犯了一個錯誤。 我當前正在使用此庫： -zeusdeux / isInViewport 。

在我的CSS中，我有一種叫做.animated-element的樣式，如下所示：-

.animation-element {
}
.in-view {
}

當添加.in-view類時，我有幾個css元素可以啟動動畫：-

.trans-1 {
  -webkit-transition: 2s;
  transition: 2s; 
}
.fade {
  opacity: 0;
}

.fade.in-view {
  opacity: 1;
}

在我的html中，我具有用於動畫的這些類的div元素：

<div class="fade trans-1 animation-element">
                <h2 class="medium-subheader-bold">Header</h2>
</div>

最后，JavaScript使用該庫檢查元素是否在視口中，如果存在，則將一個類添加到該元素中。 從而將.fade更改為.fade.in-view（不透明度0到1）：

(function($) {
    $(document).ready(function() {
        $(window).scroll(function() {
            $('.animation-element').removeClass('in-view');
            $('.animation-element:in-viewport').addClass('in-view');
        });
    });
}(jQuery));

當我在瀏覽器中加載頁面時，頁面中的所有元素都會立即加載並設置動畫。 當我檢查網頁以檢查在視口中不可見的元素時，我看到它們在添加和刪除視圖內類之間迅速閃爍。 我也嘗試過刪除$('.animation-element').removeClass('in-view'); 以上javascript代碼行，但即使元素距離視口很遠，視圖內類仍會立即添加。

我已經嘗試過使用多個庫並一直遇到相同的問題，因此它一定是我實現它的方式，而不是庫的錯誤。

我還應該說我正在使用Pug生成html，常規CSS並通過node.js服務整個頁面。

Answer 1

我終於弄清楚了問題所在。 我花了一整天的時間嘗試在JSFiddle中重新創建它並修改不同的部分。 最后是因為我沒有將<!DOCTYPE html>放在html文檔的頂部。 瘋狂的是，其他一切都起作用了，即使是向上滾動時的動畫，也就是不向下滾動，因為那一行。

jQuery檢查元素是否在視口中

問題描述

1 個解決方案

解決方案1
0 2017-01-29 16:48:55

jQuery檢查元素是否在視口中

問題描述

1 個解決方案

解決方案1 0 2017-01-29 16:48:55

解決方案1
0 2017-01-29 16:48:55