alvarotrigo.com/fullPage/和引導3網格問題

我正在使用alvarotrigo.com/fullPage/爲好的全頁面效果。此外，我使用自舉3格系統，它看起來像：alvarotrigo.com/fullPage/和引導3網格問題

<section id="section" class="section"> 
    <div class="home"> 
     <div class="container-fluid position-relative"> 
      <div class="row"> 
       <div class="col-sm-4"> 
       </div> 
       <div class="col-sm-4"> 
       </div> 
       <div class="col-sm-4"> 
       </div> 
      </div> 
     </div> 
    </div>

現在，我們看到3列，全封閉的部分，這個網站創建3個coluns觀看，並且它的確定。

但是，對於較小的視口，這三列轉換爲3個全寬列，這是問題，因爲fullpage，js現在跳過第二和第三列滾動，所以如果我滾動到#section，我只看到第一個div，如果向下滾動，動畫將跳轉到另一節，跳過2和3格。我創建了簡單的插圖。

div 2和div 3灰顯示，這些div在動畫過程中將被跳過。

我的問題是，我可以做fullpage.js上的設置或做一些調整，所以腳本會顯示那些div後，向下滾動？

謝謝。

來源

2015-12-15 Marek Brzeziński

PS：全頁腳本使得

100的高度視，所以我quess，這是JS specyfic，不是CSS .... –

若使用'FP-自動heigh'類在該部分。 – Alvaro

我鼓勵您使用一些responsiveWidth或responsiveHeight選項來關閉小屏幕設備上的自動滾屏功能。

因此，你可以有這樣的事情：

$('#fullpage').fullpage({ 
    responsiveWidth: 758 
});

Example online

來源

2015-12-15 12:59:12 Alvaro

scrollOverflow: true將幫助你每個整版部分中滾動。

檢查jsfiddle Code for ScrollOverflow

$('#fullpage').fullpage({ 
       sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
       scrollOverflow: true 
});

來源

2016-01-31 09:46:15

alvarotrigo.com/fullPage/和引導3網格問題

回答

相關問題