jquery - 几乎固定的背景图像(滚动 n 像素，然后固定)是否可能？

Question

终于开始为我的个人域设计网站，但我遇到了我想使用的背景图片的问题。

图像是天际线，但翻转后建筑物从页面顶部折叠。在倒置的天际线下方，天空颜色(在本例中为绿色/黄色/橙色)渐变为白色。

我希望实现滚动效果，其中整个页面最初滚动，直到建筑物离开页面约 50%(比如说 75 像素)，此时背景变为固定且只有文本(理想情况下包括页眉和正文)滚动超出那个范围。

实际上，页面背景变成了页面最顶部的摩天大楼的顶部，并且大部分是天白色渐变。

我的 CSS 技能相当初级，我的 JQuery 技能不存在。我很乐意把东西组合在一起，但除此之外我觉得没有其他能力。不幸的是，我通过 GOOG/SO 搜索找到的最接近的东西与视差滚动有关，这并不是我要找的东西。

有什么建议吗？

Answer 1

我认为这是可能的。我会使用 jQuery。您将查看窗口本身的滚动位置。如果滚动位置大于某个阈值，那么您可以将天际线固定在当前位置。如果小于则将其切换回来。我认为您需要动态分配固定位置以防止它看起来不稳定。

$(window).scroll(function () { 
console.log($(window).scrollTop());
if ($(window).scrollTop() > 300) {
    $(body).css(''); //reposition background image using 'top'
}
else {
     $(body).css(''); //put background image back using 'top'
}

});

我不能说这会很好用还是看起来很生涩。但这将是一个很酷的效果。如果你让它工作，请发布指向它的链接!