FullPage JS - 修复特定部分的背景图像？

Question

我正在为网站使用FullPage.js。对于我的 2-4 部分，我希望背景图像保持固定，以便只有部分中的内容在滚动，而不是背景图像。这是我尝试过的：

#section1 {
  background:#ccc;
}
#section2, #section3, #section4 {
  background:url('http://placehold.it/1024x768/7777c1/fff') no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center center;
}
#section5 {
  background:#000;
}
  #section5 h1 {
    color:#fff;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.js"></script>
<div id="fullpage">
	<div class="section" id="section1">
	    <div class="slide"><h1>Simple Demo</h1></div>
	    <div class="slide"><h1>Only text</h1></div>
	    <div class="slide"><h1>And text</h1></div>
	    <div class="slide"><h1>And more text</h1></div>
	</div>
	<div class="section" id="section2"><h1>No wraps, no extra markup</h1></div>
	<div class="section" id="section3"><h1>Just the simplest demo ever</h1></div>
  <div class="section" id="section4"><h1>Lorem Ipsum</h1></div>
  <div class="section" id="section5"><h1>Lorem Ipsum</h1></div>
</div>
<script type="text/javascript">
	var myFullpage = new fullpage('#fullpage', {
		licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE'
	});
</script>

我希望background-attachment:fixed; 能做到这一点，但背景仍会随着该部分滚动。

Answer 1

将所有内容包装在一个包装器 div 中，并将背景图像放在上面。

任何部分都可以具有 rgba 背景色、完全不透明的背景色或默认透明，具体取决于您希望每个部分的显示方式。

如果您需要更改背景图像，您可以使用一些回调函数。 afterLoad & onLeave。在这里您可以获取当前部分 (this.anchor) 甚至是 direction。

如果您知道该信息，您可以很容易地更改.wrapper 的backgroundImage。

var myFullpage = new fullpage('#fullpage', {
  licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
  anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
  onLeave: function(origin, destination, direction) {
    if (this.anchor === 'page2' && direction === 'down') {
      document.querySelector('.wrapper').style.backgroundImage = `url(https://placekitten.com/700/350)`
    } else if (this.anchor === 'page2' && direction === 'up') {
      document.querySelector('.wrapper').style.backgroundImage = `url(https://placekitten.com/600/300)`
    }

  }
});

#section1 {
  background: rgba(125, 125, 125, 0.5);
}

#section2 {
  background: white;
}

#section2 {
  background: black;
  color: white;
}

#section5 {
  background: rgba(0, 0, 0, 0.5);
}

.wrapper {
  background: url('https://placekitten.com/600/300') no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.js"></script>
<div class="wrapper">
  <div id="fullpage">
    <div class="section" id="section1">
      <div class="slide">
        <h1>Simple Demo</h1>
      </div>
      <div class="slide">
        <h1>Only text</h1>
      </div>
      <div class="slide">
        <h1>And text</h1>
      </div>
      <div class="slide">
        <h1>And more text</h1>
      </div>
    </div>
    <div class="section" id="section2">
      <h1>No wraps, no extra markup</h1>
    </div>
    <div class="section" id="section3">
      <h1>Just the simplest demo ever</h1>
    </div>
    <div class="section" id="section4">
      <h1>Lorem Ipsum</h1>
    </div>
    <div class="section" id="section5">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>
</div>