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