Jquery 几乎固定的背景图像（滚动n个像素，然后固定）可能吗？

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

该图像是一条天际线，但翻转后，建筑从页面顶部向下延伸。在倒置的天际线下方，有一个从天空颜色（在本例中为绿色/黄色/橙色）到白色的渐变

我希望实现一种滚动效果，即整个页面开始滚动，直到建筑物离页面约50%（比如说75px），此时背景变得固定，只有文本（理想情况下是页眉和正文）滚动超过该值

实际上，页面背景成为页面顶部摩天大楼的顶部，大部分为天白色渐变

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

---

有什么建议吗？

我认为这是可能的。我会使用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'
}

}))

我不能说这是否会很好地工作，或将看起来像赫尔基干。但这将是一个很酷的效果。如果你得到它的工作后，链接到它