保持文本移动Div

Question

我试图让图像在滚动上消失 - 我已经完成了。

但是，正如你可以here下面的文本和菜单离图片太远 - 当我缩小浏览器时，距离增加。

我想保持文本在滚动上覆盖图像的方式;类似的风格this.

缺乏JSFiddle的Aplogoise - 似乎无法让它工作。

我试图用this来改变它，但我失去了文字滚动图像（如FearTheGrizzly ref）。

简而言之 - 我想让文字靠近顶部的图像;并让它随浏览器一起移动。

Answer 1

问题是当您调整浏览器的大小时，背景图片会改变高度（由于background-size:100% auto;，但是元素本身并没有更新，您可以通过实际调整div的大小来修正这个问题，而不仅仅是背景 - 图像，但是让我们假设你不想这样做，在这种情况下，您需要调整使用JavaScript股利，以使内容的其余部分将出现在正确的地方。

$(document).ready(function() { 
    $homeDiv = $('.home'); 
    $(window).resize(); //call this onload to make sure the div is initially right 
}); 
$(window).resize(function() { 
    ($homeDiv).height($(window).width()/1440 * 600); 
    console.log($(window).width()/1440 * 600); 
}); 

当然然后你的褪色可能不会像你期望的那样行事，所以改变你的JS中的'opacity'行：

'opacity' : 1 - windowScroll/($(window).width()/1440 * 600 - 30) 

这确实取决于您的图像具有一致的尺寸。有一些方法可以在不知道这一点的情况下做到这一点，我相信，但这是最简单的。