题
我很惊讶我之前找不到这个问题的答案。我尝试将整页插件合并到我的网站中,但基本上禁用了滚动功能。它卡在第一部分。我尝试制作一个简化版本,将所有内容精简到骨头,同样的问题。
在头部...
<link href="css/jquery.fullPage.css" rel="stylesheet" type="text/css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="scripts/jquery.fullPage.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.fullpage();
});
</script>
在正文部分...
<body>
<header class="section">
<div><h1>A</h1></div>
</header>
<main>
<section class="section">
<div><h1>B</h1></div>
</section>
<section class="section">
<div><h1>C</h1></div>
</section>
</main>
</body>
这是怎么回事?提前致谢。
解决方案
您没有遵循插件所需的结构。你的 class="section"
元素应处于所指出的同一水平 在文档中. 。里面不能有一个部分 <main>
. 。应该处于同一水平。
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
另外,如果您使用的是该插件的最新版本,则应该对所有部分使用换行,并在初始化时使用它:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
初始化:
$(document).ready(function() {
$('#fullpage').fullpage();
});
不隶属于 StackOverflow