html>
Title* {
padding: 0;
margin: 0;
}
body {
height: 2000px;
}
#wrap {
width: 800px;
height: 400px;
background: url("bg.jpg") no-repeat center ;
background-size: cover;
}
.sircle {
position: absolute;
top: 20%;
left: 20%;
width: 0px;
height: 0px;
border-radius:50%;
background: url('circle.jpg') no-repeat fixed;
background-size: 800px 400px;
background-position-x: 0;
background-position-y: 400px;
border:1px solid #2b2b2b;
}
.box {
overflow: hidden;
float: left;
position: absolute;
top: 400px;
}
$(() => {
/**背景滚动自身高度时, */
var body = $('body')[0],
sircle = document.querySelector('.sircle');
// body.onscroll = function () ;
body.οnscrοll=function () {
console.log(this.scrollY);
sircle.style.width = this.scrollY * 4 + 'px';
sircle.style.height = this.scrollY * 4 + 'px';
sircle.style.left = 20 - this.scrollY + 'px';
sircle.style.top = 20 - this.scrollY + 'px';
sircle.style.backgroundPositionY =-this.scrollY+400 + 'px';
}
})
/