jquery - 使用 Div 保持文本移动

Question

我正在尝试获取在滚动时淡出的图像 – 我已经做到了。

但是，你可以here它下面的文本和菜单离图片太远——当我缩小浏览器时，距离会变大。

我想在滚动时保持文本覆盖图像的方式；与 this. 类似的样式

为缺少 JSFiddle 表示歉意——似乎无法让它工作。

我试着用 this 来改变它但我丢失了滚动图像的文本(如 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);
});

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

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

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