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

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

10-10 23:43
查看更多