您如何制作像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>


我的整个页面都凑在一起了! (所有部分合而为一)我的页面基本上是一页的网站,例如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谢谢alottt!

ps我像这样$(“。main”)。onepage_scroll();在我的js文件中调用该插件。

最佳答案

确保您正在加载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

10-08 00:54
查看更多