背景图不动，元素滚动，并且滚动到某个元素是替换背景图，回来时替换回来

本文链接：https://blog.youkuaiyun.com/weixin_34849724/article/details/80983947

本文介绍了一个使用HTML、CSS和jQuery实现的动态网页布局案例，包括背景图片切换、固定定位及响应式设计等技巧。通过三个圆形元素展示了浮动布局，并在滚动到特定位置时改变背景图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

</head>

<style>

#bod{

background-color :#FFF; background-image :url(img/2.jpg) ; background-repeat :no-repeat ;background-size:100% 100%;background-position: right bottom ;background-attachment:fixed;

}

margin:0;

padding:0;

}

</style>

<body >

zhaoyufei

</p>

</div>

</div>

</body>

$(function(){

var h3_height = $("#middle").offset().top;

$(window).scroll(function(){

var this_scrollTop = $(this).scrollTop();

if(this_scrollTop>h3_height ){

$("#bod").css({"background-image":"url(img/8.jpg)"});

}else{

$("#bod").css({"background-image":"url(img/2.jpg)"});

}

});

</script>

</html>