全屏滚动页面解决方案

fullPage.js 初体验

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。

今天再做一个单页的时候需要上下滚动，同事给我推荐了fullPage.js总体使用下来体验还是很不错的，记录一下用法

基本使用

<div id="app">
    <div class="section ">第1屏</div>
    <div class="section ">第2屏</div>
    <div class="section ">第3屏</div>
    <div class="section ">第4屏</div>
    <div class="section ">第5屏</div>
</div>

$(function () {
  $("#app").fullpage();
});
//他的生命周期以参数形式传递进去
$(function () {
  $("#app").fullpage({
      //生命周期
    afterRender: function () {
      $("元素").click(function () {
        $.fn.fullpage.moveSectionDown();
      });
    },
  });
});

遇到的坑

1. 如果说你发现你配置好了之后屏幕只有1屏显示，那么请给你的html元素的高度设置成auto 这个问题今天困扰了我半小时

2. 我发现如果你给页面做成全屏之后，你就没有了页脚，所以你需要增加一个页脚出来 具体增加步骤如下

<div class="section fp-auto-height" id="section2">
     // 页脚内容
</div>

需要你引入fullPage.css

然后在你自己的css中写入

#section2 {
   //高度根据你需要的来
  height: 183px !important;
  width: 100% !important;
}
#section2 > div {
  height: 183px !important;
  width: 100% !important;
}

这么做的大致意思就是，顶掉她默认设置的高度，你自己配置一个高度的页面出来

我认为这里一定要用id选择器加 !important因为她默认有一个高度，然后css里面还有一个加了最高级的htight:auto所以用id选择器给他顶掉

目前使用中大致就遇到这么多问题，以后有了在更新