Question

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

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

我想保持文字在滚动时覆盖图像的方式;与this.

类似的风格

缺乏JSFiddle的Aplogoise似乎无法让它发挥作用。

我试图用this更改它但我丢失了图像滚动图像（如FearTheGrizzly参考）。

所以简而言之 - 我希望文本靠近顶部的图像;并让它随浏览器移动。

Answer 1

问题是当您调整浏览器大小时，您的背景图像会改变高度（由于background-size:100% auto;，但元素本身不会更新。您可以通过实际调整CSS的大小来解决这个问题，而不仅仅是background-image，但我们假设您不想这样做。在这种情况下，您需要使用JavaScript调整div的大小，以便其余内容显示在正确的位置：

$(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)

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

使用Div保持文本移动

1 个答案: