Javascript 要在某个滚动点之前保持背景固定吗

我有两张背景照片，我想显示第一张背景照片，如果页面没有滚动到500，如果页面滚动超过500，那么我想显示第二张背景，两张背景必须固定在屏幕上

当页面滚动时，只有文本必须移动，如果滚动超过500，背景必须改变

$（文档）.ready（函数（）{
var imageControl=函数（事件）{
var fromTop=$（window.scrollTop（）；
url=null；
console.log（从顶部）；
如果（从顶部<500）{
url='1〕http://i.hizliresim.com/KdrGVV.png';
}否则如果（从顶部>500）{
url='1〕http://4.bp.blogspot.com/-mHaVHhUegKs/UjHp6DruPeI/AAAAAAAAGx8/m_je_crr1v0/s1600/wp+cortana+截图+mashup.jpg'；
}
$（'body'）.css（'background'，'url（'+url+'））；
};
$（窗口）。滚动（图像控件）；
});

更新了你的JSFIDLE

---

在js中将背景更改为

background image

，并在css中添加了

background attachment:fixed

，谢谢，但是当页面加载时，我看到一个空白屏幕。基本上，您需要将第一个背景设置为默认值（然后根据滚动进行更改）

    $(document).ready(function () {
        var imageControl = function (event) {
            var fromTop = $(window).scrollTop();
            url = null;
            console.log(fromTop);
            if (fromTop < 500) {
                url = 'http://i.hizliresim.com/KdrGVV.png';
            } else if (fromTop > 500) {
                url = 'http://4.bp.blogspot.com/-mHaVHhUegKs/UjHp6DruPeI/AAAAAAAAGx8/m_je_crr1v0/s1600/wp+cortana+screenshot+mashup.jpg';
            }

            $('body').css('background', 'url(' + url + ')');
        };
        $(window).scroll(imageControl);
    });