织梦网站tag怎么做,备份核验单时网站域名,织梦企业网站源码,凡科做网站是否安全现象#xff1a;当页面滑动到某个位置时#xff0c;图片吸顶。 思路#xff1a;创建一个father背景。包含内容和需要吸顶的背景图
当滚轮运动距离大于800px时#xff0c;将吸顶图的position设置为sticky#xff0c;距离顶部改为0px。 html代码#xff1a; !DOCTYPE …现象当页面滑动到某个位置时图片吸顶。 思路创建一个father背景。包含内容和需要吸顶的背景图
当滚轮运动距离大于800px时将吸顶图的position设置为sticky距离顶部改为0px。 html代码 !DOCTYPE html html head meta charsetutf-8 title123/title /head style .back{ background-image: url(img/b3.jpg); /* background-repeat: no-repeat; */ top: 800px; height: 1080px; width: 1000px; position: absolute; } .content{ position: absolute; top: 9px; } .p{ font-size: 110px; color: cornflowerblue; border: 1px solid rebeccapurple; } .father{ width: auto; height: 8000px; background-color: gray; } /style script srcjs/jquery-3.7.0.min.js/script script srcjs/back.js /script body div classfather div classback背景图/div div classcontent div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div div classp大家好我是渣渣灰/div /div /div /body script ScrollEvent() /script /html JS代码
function ScrollEvent(){ addEventListener(scroll, (event) { const scrollX window.scrollX; const scrollY window.scrollY; if ( 0scrollY scrollY800){ //$(.back).css(background-attachment, scroll) $(.back).css(position, absolute) $(.back).css(top, 800px) }else if(800scrollY){ //$(.back).css(background-attachment, fixed) $(.back).css(position, sticky) $(.back).css(top, 0px) } }); }
