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

Question

最后为我的个人域名设计网站，我遇到了我想要使用的背景图片的问题。

图像是天际线，但是翻转使得建筑物从页面顶部下来。在倒置的天际线下面有一个从天空颜色（在这种情况下是绿色/黄色/橙色）到白色的渐变。

我希望完成一个滚动效果，其中整个页面最初滚动，直到建筑物离页面约50％（比如75px），此时背景变得固定而且只有文本（理想情况下是标题和正文）滚动超出那个。

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

我的CSS技能相当简陋，我的JQuery技能不存在。我很乐意将事情一起劈砍，但除此之外别无其他能力。不幸的是，我通过GOOG / SO搜索找到的最近的东西与视差滚动有关，这不是我正在寻找的。

有什么建议吗？

Answer 1

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

$(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'
}

}）;

我不能说这是否会运作良好或者看起来是不是很生涩。但这将是一个很酷的效果。如果你得到它的工作发布一个链接！