fullpage.js獨立的部分

我創建了一個結構，像這樣

<section id="portfolio"> 
    <div class="col-lg-5 col-sm-5" id="portfolio-left"> 
     &nbsp; 
    </div> 

    <div class="col-lg-7 col-sm-7" id="portfolio-right"> 
     <div id="fullpage"> 
      <section class="vertical-scrolling"> 
       <div class="horizontal-scrolling"> 
        <img src="https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"> 
       </div> 
       <div class="horizontal-scrolling"> 
        <img src="https://i.ytimg.com/vi/a6gHj0bHmg8/maxresdefault.jpg"> 
       </div> 
      </section> 
      <section class="vertical-scrolling"> 
       <h2>fullPage.js</h2> 
       <h3>This is the second section</h3> 
      </section> 
     </div> 
    </div> 
</section>

，然後添加下面的JavaScript按

$('#fullpage').fullpage({ 
    sectionSelector: '.vertical-scrolling', 
    slideSelector: '.horizontal-scrolling', 
    navigation: true, 
    slidesNavigation: true, 
    css3: true, 
    controlArrows: false, 
});

我已經設置了文檔打個JSFiddle來證明我在哪裏與事物。所以目前，您可以水平和垂直滾動。所以我的第一張圖片是一匹馬，我想要做的是當你在這個部分，如果你垂直滾動顯示馬的信息。所以基本上，我正在嘗試使垂直滾動與節的父節點相關。如果您處於熊形象並垂直滾動，它應顯示關於熊的信息。

會是這樣的事情嗎？

謝謝

來源

2016-12-06 kate_hudson