Question

我试图获得固定的背景来使用Fullpage JS。无论我做什么，背景都留在那里，或者根本不显示。我试过一个JS小提琴，但我也无法让它工作。 https://jsfiddle.net/jpking72/jqa7wapt/9/

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.js"></script>
    <style type="text/css">

#fullsite {
  background-attachment:fixed;
}

#section1 {
  background:url(/images/pwHoustonDowntown.jpg) no-repeat 0 0 fixed / cover;
}

#section2 {
  background-color:#CCCCCC;
}

#section3 {
  background:url(/images/pwHoustonWindow2.jpg) no-repeat 0 0 fixed / cover ;
}

    </style>
    <script type="text/javascript">

$(document).ready(function () {
  $("#fullsite").fullpage({

})

})

    </script>
</head>
<body>
<div id="fullsite">
  <div class="section" id="section1">
    <h1>
    Section 1
    </h1>
  </div>
  <div class="section" id="section2">
  <h1>
Section 2
  </h1>
  </div>
  <div class="section" id="section3">
  <h1>
  Section 3
  </h1>
  </div>
</div>
</body>
</html>

Answer 1

That's a bug in some browsers.与fullpage.js无关。 Fullpage.js使用css3的translate3d属性，这是在某些浏览器中导致错误的属性。

要解决这个问题，您有两种选择：

在fullpage.js选项中使用css3:false。它不会变得流畅，但是你有固定的背景。
使用scrollBar:true。你会得到一个滚动条，它也可能不那么流畅。

正如您在fixedBackgrounds.html provided in in fullpgae.js中看到的，它使用css3：false。

        $('#fullpage').fullpage({
            verticalCentered: false,
            //to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
            css3:false
        });

Answer 2

您需要在项目中包含jquery。应首先包含Jquery

$(document).ready(function () {
     $("#fullsite").fullpage({

     });
});

FullPage JS修复背景不起作用

2 个答案: