HTML 當捲到的時候才顯示圖片

. . . .
.

製作當使用著移動到下面的時候才顯示的效果。

實際應用於 toolman 首頁的用法

$(document).ready(function() {
    $(window).scroll(function() {
        $('.article').each(function(i) {
            var t = $(this).offset().top + 40; // 要顯示的位置
            var n = $(window).scrollTop() + $(window).height(); // 當前的位置

            if (n > t {
                $(this).animate({
                    'opacity': '1', // 0完全透明 1不透明
                }, 1000); // 1s
            }
        });
    });

    // 自動捲動不然一開始會都沒有顯示
    // 試著往下滑然後往上可是沒有成功
    window.scrollBy(0, 3); // (x, y)
});

因為我把他們全部一開始都設定成隱藏的狀態,要有捆動的時候才會顯示,擔當頁面中的內容不足以有況動的範圍時,就會顯示不出來,所以今天多新增一點東西,強至將高度設定筆螢幕高10px。

Source: 捲到才顯示畫面 on scroll show div | Davidou的 Blog