javascript - 你如何制作一个滚动页面？

Question

如何制作像 this 这样的单页滚动网站？ . 我尝试使用来自 here 的“peachananr”插件但它没有用，反而弄乱了我的布局。 例如在做之后:

<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>

<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
 Projects:
</span>
</section>
</div>

我的整个页面都在一起了 o.O ! (所有部分合而为一)我的页面基本上是一个单页网站，如 this

这是我布局每个部分页面的方式的 CSS:

body, html {
  height: 100%;
  margin: 0;
}

* {
    box-sizing: border-box;
    /* look this up */
}

.container {
    width: 100%;
    text-align: center;
    height: 100%;
}


.mainPage {
height:100%;
width:100%;

background: url(Imgs/13.jpg);
background-repeat: no-repeat;
background-position: center center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

.projectContents {
position: relative;
height:100%;
width:100%;
background: white;

}

这是我的HTML:

<section id = "mainPage" class="container mainPage" >
</section>

<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
 Projects:
</span>
</section>

请问我该如何解决这个问题，或者您能否提供任何解决方案。示例将不胜感激! :D 非常感谢!

ps 我在我的 js 文件中这样调用插件 $(".main").onepage_scroll();

Answer 1

确保您正在加载 onepage-scroll css 和 javascript...它可以在没有任何 CSS 的情况下正常工作。那里的风格。

HTML

<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>

<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
 Projects:
</span>
</section>
</div>

JS

$('.main').onepage_scroll()  

DEMO