更改背景图像滚动 [英] Changing background-image onscroll
问题描述
我试图在某个位置滚动过去之后更改元素的背景图像.这是我的代码段:
I'm trying to change the background image of an element after a certain position has been scrolled past. Here's a snippet of my code:
<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">
我正在使用类似的编码样式来显示/隐藏某个功能正常的滚动位置之后的返回顶部"按钮.我不认为两者之间没有冲突(尽管内联脚本不是我的首选样式)，因为即使我删除了与返回页首"按钮相关的所有内容，我的代码仍然无法运行.
I'm using a similar coding style to show/hide a "back to top" button after a certain scroll position that functions just fine. I don't think there's a conflict between the two (though inline scripting isn't my preferred style) because even when I remove everything related to the "back to top" button, my code still fails to function.
这是愚蠢的语法错误，还是我的方法有更根本的错误?
Is this a stupid syntactical error, or is there a more fundamental error to my approach?
推荐答案
我对您的代码做了一些微调，并且可以正常工作:
I've tweaked your code a little and it's working:
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请求，因此，每当更改背景图像时，您都会看到闪烁.
However, following the above method will be inefficient as IMHO it makes an extra HTTP request for the images every time the scroll goes up and down the threshold and thus you'll see flickering every time the background images get changed.
因此，如果我们使用外部CSS类(即#outer.bg2)，最好根据滚动位置添加/删除它，这将获取图像的缓存版本，使其更好平滑[第一次请求图像时第一次除外，].如下所示:
So it'd be better if we make use of an external CSS class, i.e #outer.bg2, and just add/remove it depending on the position of the scroll and this will fetch a cached version of the image which makes it smooth [except for the first time when the image is being requested for the first time]. Like below:
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的底部时发生，如果您希望根据顶部边缘发生触发，则将其替换:
In the above code the triggering will happen when the scroll meets the bottom of the element #one, if you want the triggering to happen according to the top edge then replace this:
var oneTop = divOne.offsetTop;
与此:
var oneTop = divOne.offsetTop - divOne.offsetHeight;
这篇关于更改背景图像滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
