如果 div 在視口中間，則啟動 css 動畫

Question

當 div 位於視口中間時，我想開始一個 CSS 動畫。 我的代碼有效，但僅在它位於視口的開頭時才開始。 我需要做什么計算才能讓動畫在視口中間時開始。

 (function ($) { $.fn.visible = function (partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); }; })(jQuery); var win = $(window); var allMods = $(".slider-view"); allMods.each(function (i, el) { var el = $(el); if (el.visible(true)) { el.addClass("already-visible"); } }); win.scroll(function (event) { allMods.each(function (i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); } }); });

Answer 1

我建議您查看 JavaScript 中的 Waypoints。 我個人在我的一個 React 項目中使用過它們，但在任何普通的 JS 項目中都沒有使用過。 一旦您滾動瀏覽 HTML 元素的特定部分，航點對於觸發特定事件非常有用。 您還可以通過更改偏移值來控制您希望事件觸發的點。