我有两张背景照片,我想显示第一张背景照片,如果页面没有滚动到500,如果页面滚动超过500,那么我想要显示第二张背景,两个背景必须定位固定并伸展到屏幕上。
当页面滚动时,只有文本必须移动,如果scoll超过500,则背景必须改变。
$(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);
});
答案 0 :(得分:2)
更新了你的jsfiddle
在js中将背景更改为background-image
,并在css中添加background-attachment: fixed