我试图在某个位置滚动过去之后更改元素的背景图像。这是我的代码片段:
<body>
<script>
window.onscroll = function() {scrollBG()};
function scrollBG() {
if (document.body.scrollTop > document.getElementById("one").getBoundingClientRect().top ||
document.documentElement.scrollTop > document.getElementById("one").getBoundingClientRect().top) {
document.getElementById("outer").style.backgroundImage = "url('imgs/pic1.jng')";
} else {
document.getElementById("outer").style.backgroundImage = "url('imgs/pic2.jpg')";
}
}
</script>
<table id="outer">
我正在使用类似的编码样式来显示/隐藏某个功能正常的滚动位置后的“返回页首”按钮。我认为这两者之间没有冲突(尽管内联脚本不是我的首选样式),因为即使删除了与“返回页首”按钮相关的所有内容,我的代码仍然无法运行。
这是愚蠢的语法错误,还是我的方法有更根本的错误?
最佳答案
我对您的代码进行了一些微调,并且可以正常工作:
jsFiddle 1
var divOuter = document.getElementById("outer"),
divOne = document.getElementById("one");
window.onscroll = function() {scrollBG()};
function scrollBG() {
var oneTop = divOne.getBoundingClientRect().top;
if(document.body.scrollTop > oneTop ||
document.documentElement.scrollTop > oneTop){
divOuter.style.backgroundImage = "url('//www.planwallpaper.com/static/images/518071-background-hd_xO1TwRc.jpg')";
} else {
divOuter.style.backgroundImage = "url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg')";
}
}
body { margin: 0; padding: 0; height: 1500px; }
#outer {
position: fixed;
background: url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg') no-repeat;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#one {
width: 100%;
height: 150px;
background-color: orange;
color: white;
position: relative;
top: 400px;
}
<div id="outer"></div>
<div id="one"><h1>This is One</h1></div>
但是,采用上述方法效率不高,因为恕我直言,每次滚动阈值上下移动时,都会对图像进行额外的HTTP请求,因此,每当更改背景图像时,您都会看到闪烁。
因此,最好使用外部CSS类(即
#outer.bg2
),然后根据滚动位置添加/删除它,这将获取图像的缓存版本,从而使其平滑[第一次请求图像时]。如下所示:jsFiddle 2
var divOuter = document.getElementById("outer"),
divOne = document.getElementById("one");
window.onscroll = function() { scrollBG() };
function scrollBG() {
var oneTop = divOne.offsetTop;
if (document.body.scrollTop > oneTop ||
document.documentElement.scrollTop > oneTop) {
divOuter.classList.add('bg2');
} else {
divOuter.classList.remove('bg2');
}
}
body{ margin:0; padding:0; height: 1500px; }
#outer{
position:fixed;
background: url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg') no-repeat;
top:0;
left:0;
right:0;
bottom:0;
}
#outer.bg2{
background: url('//www.planwallpaper.com/static/images/518071-background-hd_xO1TwRc.jpg');
}
#one{
width:100%;
height:150px;
background-color:orange;
color:white;
position:relative;
top:400px;
}
<div id="outer"></div>
<div id="one"><h1>This is One</h1></div>
在上面的代码中,触发将在滚动遇到元素
#one
的底部时发生,如果您希望根据顶部边缘发生触发,则将其替换:var oneTop = divOne.offsetTop;
有了这个:
var oneTop = divOne.offsetTop - divOne.offsetHeight;
jsFiddle 3
关于javascript - 更改背景图像滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44371552/