FullPage JS固定の背景が動作しない

私はFullpage JSで動作する固定の背景を取得しようとしています。私が何をしていても、そこにとどまるか、まったく現れない。私はJSフィドルを試しましたが、私はそれを全く働かせません。 https://jsfiddle.net/jpking72/jqa7wapt/9/FullPage JS固定の背景が動作しない

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

出典

2016-08-26 The Hawk

http://alvarotrigo.com/fullPage/ –

プロジェクトにjqueryを含める必要があります。 jQueryがfullpage.jsを行うには最初の

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

    }); 
});

出典

2016-08-26 16:49:40 user256968

加えて、それでも機能しません。 –

@ TheHawkあなたのjqueryが最初になるはずです。作業リンク：https://jsfiddle.net/9nj3w684/2/ – user256968

That's a bug in some browsers.何を含めるべきではありません。 Fullpage.jsは一部のブラウザでバグの原因となっているcss3のtranslate3dプロパティを使用します。

使用css3:false fullpage.jsオプションで：あなたは2つのオプションがあり、それを解決するために

。それは流動的ではありませんが、あなたの固定された背景が働くでしょう。
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 
     });

出典

2016-08-30 10:11:28 Alvaro

FullPage JS固定の背景が動作しない

答えて

関連する問題