英雄圖像隱藏內容直到滾動

Question

我喜歡中型網站，尤其是他們的美麗故事頁面 。 我試圖弄清楚他們如何處理這些頁面。

如果您的瀏覽器窗口足夠大，那么您可以在下面看到封面圖像和一些內容。

但是，如果您調整瀏覽器窗口的大小，則圖像的底部會觸及瀏覽器窗口的底部，並隨着瀏覽窗口的大小進行調整。 Aldo內容將一直隱藏，直到您滾動為止。

我試圖弄清楚他們是如何做到的，並在這里用我的基本頁面結構設置了CodePen： http ://codepen.io/realph/pen/luwdJ

誰能解釋我如何達到類似的效果？

任何幫助表示贊賞。 提前致謝！

Answer 1

嘗試這個，

更新

$(document).ready(function() { 
        var $winwidth = $(window).width();
        $("img.source-image").attr({
            width: $winwidth
        });
        $(window).bind("resize", function(){ 
            var $winwidth = $(window).width();
            var $winheight = $(window).height();
            $("img.source-image").css({
                'width': $winwidth,'height':$winheight
            });
         });
    }); 

上面的腳本使圖像寬度根據屏幕寬度而變化

和CSS

img.source-image {
    position: absolute;
    top: 0;
    left: 0;
}

要么

#img.source-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

欲了解更多信息，請點擊此鏈接