Question

我正在尝试在某个位置滚动过去后更改元素的背景图像。这是我的代码片段：

<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">

我正在使用类似的编码风格，在某个功能正常的滚动位置后显示/隐藏“返回顶部”按钮。我不认为两者之间存在冲突（虽然内联脚本不是我喜欢的样式），因为即使我删除了与“返回顶部”按钮相关的所有内容，我的代码仍无法正常运行。

这是一个愚蠢的语法错误，还是我的方法有一个更基本的错误？

Answer 1

我已经稍微调整了你的代码并且它正在运行：

jsFiddle 1

＆＃13;

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')"; 
       }
  }

＆＃13;

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;
}

＆＃13;

<div id="outer"></div>
<div id="one"><h1>This is One</h1></div>

＆＃13;

然而，遵循上述方法将是低效的，因为恕我直言，每当滚动上下阈值时，它就会对图像发出额外的HTTP请求，因此每次背景图像发生变化时，您都会看到闪烁。

如果我们使用外部CSS类，即#outer.bg2，并且根据滚动的位置添加/删除它，那么它会更好，这将获取一个缓存版本的使图像平滑的图像[除了第一次首次请求图像时]。如下所示：

jsFiddle 2

＆＃13;
＆＃13;
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'); } }
＆＃13;
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; }
＆＃13;
<div id="outer"></div> <div id="one"><h1>This is One</h1></div>
＆＃13;
＆＃13;
＆＃13;

在上面的代码中，当滚动符合元素#one的底部时，触发将发生，如果您希望根据上边缘触发，则替换它：

var oneTop = divOne.offsetTop;

有了这个：

var oneTop = divOne.offsetTop - divOne.offsetHeight;

jsFiddle 3

更改背景图片onscroll

1 个答案: