2017-08-05 86 views
0

我有我的頁面在fullpagejs內的三個部分。中間頁面需要包含分成兩列的非常高的div。左邊是需要遵循正確文本的div,需要div的整個高度。但由於方式fullpage.js工作(使用CSS而不是實際的滾動翻譯我不能讓DIV被定位固定的行爲像它應該固定的div裏面的fullpage.js部分

HTML

<div class="section section-1 show-for-large"> 
    section1 content 
</div> 
<div class="section section-2"> 
    <div class="row"> 
    <div class="small-12 medium-6 column"> 
     <div class="row" id="pokemon"> 
      <div class="small-5 medium-5 columns"> 
       <img src="/"> 
      </div> 
      <div class="small-7 medium-7 column"> 
       <span class="title"> 
        title 
       </span> 
      </div> 
     </div> 
     <div class="row hide-for-large"> 
      <div class="small-12 columns"> 
       <p> 
        text 
       </p> 
      </div> 
     </div> 
    </div> 
    <div class="small-12 medium-5 column"> 
     <div> 
      <p>text</p> 
     </div> 
    </div> 
</div> 
</div> 
<div class="section section-3"> 
    section3 content 
</div> 
<div class="section section-4 fp-auto-height"> 
    section4 content 
</div> 

全頁JS

$('#fullpage').fullpage({ 
    sectionSelector: '.section', 
    scrollOverflow: true, 
    verticalCentered: false, 
    normalScrollElements:'#pokemon', 
    css3: true, 
    }); 

我試過使用像http://stickyjs.com/這樣的插件,和類似的但它的問題是它們都在滾動的原則上工作

回答

1

使用position:absolute而不是固定的。然後使用position:relative作爲截面元素,因此絕對位置將與截面相關。