jquery - 使用 Div 保持文本移动

Question

我正在尝试让图像在滚动时消失——我已经做到了。

然而，正如你在这里看到的那样，它下面的文本和菜单离图片太远了——当我把浏览器缩小时，距离会增加。

我想保持文本在滚动时覆盖图像的方式；与此类似的风格。

为缺少 JSFiddle 道歉——似乎无法让它工作。

我试图用这个来改变它，但我失去了在图像上滚动的文本（比如 FearTheGrizzly 参考）。

简而言之——我想让文本靠近顶部的图像；并让它随着浏览器移动。

Answer 1

问题是，当您调整浏览器大小时，您的背景图像会改变高度（由于background-size:100% auto;，但元素本身不会更新。您可以通过 CSS 而不是仅背景图像实际调整 div 的大小来解决此问题，但让我们假设你不想那样做。在这种情况下，你需要使用 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);
});

当然，那么你的淡入淡出可能不会像你期望的那样表现，所以也改变'opacity'你的 JS 中的行：

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

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