更改背景图像滚动

Question

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? 这是一个愚蠢的语法错误，还是我的方法更根本的错误？

Answer 1

I've tweaked your code a little and it's working: 我对您的代码做了一些微调，并且可以正常工作：

jsFiddle 1 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>

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. 但是，遵循上述方法效率不高，因为恕我直言，每次滚动阈值上下移动时，都会对图像进行额外的HTTP请求，因此，每次更改背景图像时，您都会看到闪烁。

So it'd be better if we make use of an external CSS class, ie #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 ]. 因此，最好使用外部CSS类，即#outer.bg2 ，然后根据滚动位置添加/删除它，这将获取图像的缓存版本，从而使其平滑[ 首次请求图像时除外 。 Like below: 如下所示：

jsFiddle 2 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>

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: 在上面的代码中，触发将在滚动遇到元素#one的底部时发生，如果您希望根据顶部边缘发生触发，则将其替换：

var oneTop = divOne.offsetTop;

With this: 有了这个：

var oneTop = divOne.offsetTop - divOne.offsetHeight;

jsFiddle 3 jsFiddle 3

更改背景图像滚动

问题描述

1 个解决方案

解决方案1
0 2017-06-05 15:54:43

更改背景图像滚动

问题描述

1 个解决方案

解决方案1 0 2017-06-05 15:54:43

解决方案1
0 2017-06-05 15:54:43