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