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背景色，完全不透明的背景色或默认情况下是透明的。

如果需要更改背景图像，则可以挂入一些回调。 action和afterLoad。在这里，您可以获得当前部分（onLeave）甚至是this.anchor。

您知道该信息，就可以很容易地更改direction中的backgroundImage。

.wrapper

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

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

1 个答案: