当从底部滚动到顶部时,强制fullpage.js滚动到长部分的顶部

时间:2016-03-16 18:20:35

标签: javascript jquery html scroll fullpage.js

所以我在我的页面上实现了fullpage.js,除了一件事外,一切似乎都在工作:

当我从页面底部滚动并向上工作时,页面似乎选择使用部分的底部(而不是部分的顶部)作为键盘滚动的参考。因为我故意包括长的部分(比整页更长,我想保留)这意味着当我在长部分下方滚动,然后回到它们时,显示器落在下半部分(而不是这些长节的上半部分。这是不可取的。

我的问题:

1)我是否正确确定fullpage.js正在使用这些幻灯片的底部作为从页面底部向上滚动的参考?

2)你们中的任何人都知道我可以实现的一个修复程序,它允许我从下面滚动时使插件滚动到上一张幻灯片的顶部,而不是将前一部分的底部对齐到我的底部屏幕?

我认为这是一个问题,其他希望保留长篇章节的人也可能会面对,所以任何帮助都不仅会受到我的尊重,也会得到其他人的高度赞赏。 这是一个link to fullpage.js

以下是codepen:http://codepen.io/ihatecoding/pen/grgaxr

以下是我的fullpage.js设置:

 $('#fullpage').fullpage({
          sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#1bbc9b', '#4BBFC3', '#7BAABE'],
          scrollBar: true,
          fitToSection:false,
          sectionSelector: 'section',
          scrollingSpeed: 300,
          paddingTop: '100px',
          verticalCentered:true,
          fixedElements: '#headerCont'
       });

这是我的HTML(如果需要,可以在codepen上看到CSS):

<html>
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <article>
<div id = "fullpage">

<div id= "headerCont">
<div id = "header">

<div id="topWrapper"></div>

 <table id="lastRow" class="home">
<tr>
  <td id ="finalCell">
  </td>
</tr>
</table>

</div>
</div>


  <section>


  <h1 class="divider">Section1</h1>
      <div id = "about" class = "mainSub">

      <div id="mainImage" class="imgDiv introCell">
      </div>

      <div id = "nameTitle" class="introCell">

      </div>


      </div>

    </section>

      <section>

      <div id = "previews" class = "mainSub">
      <!-- <section> -->
      <h1 class="divider">Section2</h1>


  <div class="grid bg eCell">
     <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell">
                  Stuff<br>1
              </div>
          </div>
      </div>
  </div>

  <div class="grid bg stemCell">
      <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell stem">
                  Stuff<br>2
              </div>
          </div>
      </div>
  </div>

  <div class="grid bg eCell">
     <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell">
                  Stuff<br>3
              </div>
          </div>
      </div>
  </div>

  <div class="grid bg stemCell">
      <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell stem">
                  Stuff<br>4
              </div>
          </div>
      </div>
  </div>


      </div>


      <!-- </section> -->
    </section>






   <section>
      <div id = "contactDiv" class = "mainSub">
        <!--  <section> -->


        <h1><a name="contact" class="anchor">Section3</a></h1>
        <div id = "contactInfo" class = "contactContentWrapper sectionContentWrapper">


      <div = "phoneDiv" class = "contactMethodDiv">
        <span id="PhoneTitle" class = "contactTitle">Phone:</span><a href="tel:5555555555"><span>555 555 5555 </span></a>
      </div>

      </div>
        <!-- </section> -->
      </div>
    </section>



    <section>

    <div id="staffDiv">
      <h1>Section4</h1>
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>


    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>

    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>

    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>
    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">persond</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>


    <div id="staffDiv">

      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>


    </section>


    <section id="footerSection">
    <div id = "eFooter" class = "footer areaSub">
      <div id = "eFooterContentWrapper" class = "footerContentWrapper sectionContentWrapper">

    <ul id="eFooterList" class ="footerList">
        <li><a>footerA</a></li>
        <li><a>footerB</a></li>
        <li><a>footerC</a></li>
    </ul>

    </div>
    </div>
  </section>









</div>
      </article>
 </body>
 </html>

0 个答案:

没有答案