我正在尝试将jQuery panelSnap实现到我的网站中，但我甚至无法获得演示功能......
显然我做错了什么，我试着摆弄一下，但它没有帮助我。
这是我的HTML：
<html>
<head>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.panelSnap.js"></script>
<script>
var options = {
$menu: $('header .menu')
};
$('.panel_container').panelSnap(options);
</script>
<style>
section {
margin-bottom:800px;
}
</style>
</head>
<body>
<header>
<div class="menu">
<a href="#first" data-panel="first">First</a>
<a href="#second" data-panel="second">Second</a>
<a href="#third" data-panel="third">Third</a>
</div>
</header>
<div class="panel_container">
<section data-panel="first"><h1>test</h1><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat erat at rhoncus porta. Vestibulum fringilla viverra laoreet. Ut vel nunc adipiscing, consequat mauris eget, aliquet leo. Nunc viverra posuere elit, ut hendrerit massa dignissim vitae. Ut euismod quam ut sapien sagittis, ac euismod libero rutrum. Sed at justo felis. Proin condimentum tortor a erat laoreet, quis adipiscing velit elementum. Pellentesque egestas sem a ante aliquet, in semper eros venenatis. Mauris faucibus orci bibendum libero aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fermentum dolor vel nisi rhoncus, ultrices tincidunt nisi vehicula. Nulla eros nibh, interdum quis tellus nec, convallis ullamcorper sapien. Pellentesque adipiscing gravida suscipit.
Proin vitae nisi quis lectus tristique auctor. Nam tristique sapien sit amet odio faucibus adipiscing. Sed lacinia tortor in mollis auctor. Proin sit amet est ante. Sed fermentum arcu ut arcu ultricies, quis luctus odio vehicula. Duis tincidunt elementum lacus quis cursus. Integer porta sit amet purus et viverra. Nulla quis sollicitudin urna. Pellentesque et nunc semper, dapibus massa ac, scelerisque ipsum. In tempus massa et tortor mattis, sit amet laoreet neque accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod non massa at sagittis.
Vestibulum pulvinar purus odio. Vestibulum non iaculis metus. Maecenas at aliquam leo, eu commodo dui. In id ullamcorper metus, in convallis massa. Donec a ante nec risus vehicula suscipit sit amet a dui. Etiam quam enim, posuere et tempor vitae, accumsan vel risus. Vivamus a arcu tortor. Morbi auctor placerat massa convallis sagittis. Vivamus accumsan vulputate rhoncus. Phasellus mattis orci non luctus interdum. Praesent eu feugiat mi. Phasellus vitae elementum nunc. Aliquam luctus aliquam tellus, quis commodo ipsum molestie vel. Cras ut dignissim erat.
Aenean luctus porta enim eu feugiat. Mauris quis tristique massa, id commodo risus. Morbi consectetur, magna nec molestie tincidunt, libero nunc volutpat nulla, quis feugiat metus leo quis enim. Proin varius, turpis id rhoncus mattis, dui magna fringilla nisi, nec blandit nisl arcu ac tortor. Proin est nisi, tempor sit amet porta ac, cursus sit amet est. Praesent suscipit, nibh non malesuada aliquet, dui turpis sagittis magna, nec facilisis metus magna ut turpis. Fusce sit amet massa at mi euismod elementum sit amet id massa. Duis nec magna vitae arcu consequat tempus. Etiam non pellentesque libero. Cras aliquet convallis adipiscing. Aliquam dictum viverra sem nec tempus. Nulla odio justo, ornare ut velit vel, commodo venenatis libero. Curabitur in tincidunt elit. Ut ac luctus risus, quis interdum neque. Sed quis nulla id erat gravida pretium sit amet eget odio.
Curabitur egestas a mi eget sollicitudin. Ut interdum dictum augue lobortis consequat. Aliquam congue pharetra rhoncus. Ut nec tortor eget nunc vestibulum venenatis id quis nibh. Nullam at dui consequat, aliquet odio porttitor, convallis sapien. In bibendum ipsum non elementum euismod. Maecenas eu justo a diam mollis placerat ac sit amet mauris. Phasellus id aliquam ligula, et tristique est. Etiam at arcu pretium, accumsan odio eu, vestibulum tellus. Etiam dapibus laoreet volutpat. Sed et urna ipsum. Nulla ultrices quam sem, eu eleifend purus iaculis a. Nunc sit amet congue mauris.
</section>
<section data-panel="second"><h1>test</h1><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat erat at rhoncus porta. Vestibulum fringilla viverra laoreet. Ut vel nunc adipiscing, consequat mauris eget, aliquet leo. Nunc viverra posuere elit, ut hendrerit massa dignissim vitae. Ut euismod quam ut sapien sagittis, ac euismod libero rutrum. Sed at justo felis. Proin condimentum tortor a erat laoreet, quis adipiscing velit elementum. Pellentesque egestas sem a ante aliquet, in semper eros venenatis. Mauris faucibus orci bibendum libero aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fermentum dolor vel nisi rhoncus, ultrices tincidunt nisi vehicula. Nulla eros nibh, interdum quis tellus nec, convallis ullamcorper sapien. Pellentesque adipiscing gravida suscipit.
Proin vitae nisi quis lectus tristique auctor. Nam tristique sapien sit amet odio faucibus adipiscing. Sed lacinia tortor in mollis auctor. Proin sit amet est ante. Sed fermentum arcu ut arcu ultricies, quis luctus odio vehicula. Duis tincidunt elementum lacus quis cursus. Integer porta sit amet purus et viverra. Nulla quis sollicitudin urna. Pellentesque et nunc semper, dapibus massa ac, scelerisque ipsum. In tempus massa et tortor mattis, sit amet laoreet neque accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod non massa at sagittis.
Vestibulum pulvinar purus odio. Vestibulum non iaculis metus. Maecenas at aliquam leo, eu commodo dui. In id ullamcorper metus, in convallis massa. Donec a ante nec risus vehicula suscipit sit amet a dui. Etiam quam enim, posuere et tempor vitae, accumsan vel risus. Vivamus a arcu tortor. Morbi auctor placerat massa convallis sagittis. Vivamus accumsan vulputate rhoncus. Phasellus mattis orci non luctus interdum. Praesent eu feugiat mi. Phasellus vitae elementum nunc. Aliquam luctus aliquam tellus, quis commodo ipsum molestie vel. Cras ut dignissim erat.
Aenean luctus porta enim eu feugiat. Mauris quis tristique massa, id commodo risus. Morbi consectetur, magna nec molestie tincidunt, libero nunc volutpat nulla, quis feugiat metus leo quis enim. Proin varius, turpis id rhoncus mattis, dui magna fringilla nisi, nec blandit nisl arcu ac tortor. Proin est nisi, tempor sit amet porta ac, cursus sit amet est. Praesent suscipit, nibh non malesuada aliquet, dui turpis sagittis magna, nec facilisis metus magna ut turpis. Fusce sit amet massa at mi euismod elementum sit amet id massa. Duis nec magna vitae arcu consequat tempus. Etiam non pellentesque libero. Cras aliquet convallis adipiscing. Aliquam dictum viverra sem nec tempus. Nulla odio justo, ornare ut velit vel, commodo venenatis libero. Curabitur in tincidunt elit. Ut ac luctus risus, quis interdum neque. Sed quis nulla id erat gravida pretium sit amet eget odio.
Curabitur egestas a mi eget sollicitudin. Ut interdum dictum augue lobortis consequat. Aliquam congue pharetra rhoncus. Ut nec tortor eget nunc vestibulum venenatis id quis nibh. Nullam at dui consequat, aliquet odio porttitor, convallis sapien. In bibendum ipsum non elementum euismod. Maecenas eu justo a diam mollis placerat ac sit amet mauris. Phasellus id aliquam ligula, et tristique est. Etiam at arcu pretium, accumsan odio eu, vestibulum tellus. Etiam dapibus laoreet volutpat. Sed et urna ipsum. Nulla ultrices quam sem, eu eleifend purus iaculis a. Nunc sit amet congue mauris.
Sed euismod est urna. Aliquam lacinia nulla et mi tempus porta. Aliquam varius, nulla nec vestibulum lobortis, urna ligula gravida est, non sollicitudin lorem dolor ac enim. Vivamus non porta velit. Aenean ut bibendum nunc. Sed non lectus dapibus, mattis nisl condimentum, placerat nibh. Nulla tempus molestie laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet magna id erat auctor vulputate non non odio. Morbi at ipsum condimentum, commodo velit tincidunt, iaculis est. In ultrices, quam hendrerit luctus suscipit, urna odio ornare risus, sed laoreet odio libero vitae ipsum. In quis venenatis lacus. Mauris elementum risus eget justo cursus viverra.
</section>
<section data-panel="third"><h1>test</h1><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat erat at rhoncus porta. Vestibulum fringilla viverra laoreet. Ut vel nunc adipiscing, consequat mauris eget, aliquet leo. Nunc viverra posuere elit, ut hendrerit massa dignissim vitae. Ut euismod quam ut sapien sagittis, ac euismod libero rutrum. Sed at justo felis. Proin condimentum tortor a erat laoreet, quis adipiscing velit elementum. Pellentesque egestas sem a ante aliquet, in semper eros venenatis. Mauris faucibus orci bibendum libero aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fermentum dolor vel nisi rhoncus, ultrices tincidunt nisi vehicula. Nulla eros nibh, interdum quis tellus nec, convallis ullamcorper sapien. Pellentesque adipiscing gravida suscipit.
Proin vitae nisi quis lectus tristique auctor. Nam tristique sapien sit amet odio faucibus adipiscing. Sed lacinia tortor in mollis auctor. Proin sit amet est ante. Sed fermentum arcu ut arcu ultricies, quis luctus odio vehicula. Duis tincidunt elementum lacus quis cursus. Integer porta sit amet purus et viverra. Nulla quis sollicitudin urna. Pellentesque et nunc semper, dapibus massa ac, scelerisque ipsum. In tempus massa et tortor mattis, sit amet laoreet neque accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod non massa at sagittis.
Vestibulum pulvinar purus odio. Vestibulum non iaculis metus. Maecenas at aliquam leo, eu commodo dui. In id ullamcorper metus, in convallis massa. Donec a ante nec risus vehicula suscipit sit amet a dui. Etiam quam enim, posuere et tempor vitae, accumsan vel risus. Vivamus a arcu tortor. Morbi auctor placerat massa convallis sagittis. Vivamus accumsan vulputate rhoncus. Phasellus mattis orci non luctus interdum. Praesent eu feugiat mi. Phasellus vitae elementum nunc. Aliquam luctus aliquam tellus, quis commodo ipsum molestie vel. Cras ut dignissim erat.
Aenean luctus porta enim eu feugiat. Mauris quis tristique massa, id commodo risus. Morbi consectetur, magna nec molestie tincidunt, libero nunc volutpat nulla, quis feugiat metus leo quis enim. Proin varius, turpis id rhoncus mattis, dui magna fringilla nisi, nec blandit nisl arcu ac tortor. Proin est nisi, tempor sit amet porta ac, cursus sit amet est. Praesent suscipit, nibh non malesuada aliquet, dui turpis sagittis magna, nec facilisis metus magna ut turpis. Fusce sit amet massa at mi euismod elementum sit amet id massa. Duis nec magna vitae arcu consequat tempus. Etiam non pellentesque libero. Cras aliquet convallis adipiscing. Aliquam dictum viverra sem nec tempus. Nulla odio justo, ornare ut velit vel, commodo venenatis libero. Curabitur in tincidunt elit. Ut ac luctus risus, quis interdum neque. Sed quis nulla id erat gravida pretium sit amet eget odio.
Curabitur egestas a mi eget sollicitudin. Ut interdum dictum augue lobortis consequat. Aliquam congue pharetra rhoncus. Ut nec tortor eget nunc vestibulum venenatis id quis nibh. Nullam at dui consequat, aliquet odio porttitor, convallis sapien. In bibendum ipsum non elementum euismod. Maecenas eu justo a diam mollis placerat ac sit amet mauris. Phasellus id aliquam ligula, et tristique est. Etiam at arcu pretium, accumsan odio eu, vestibulum tellus. Etiam dapibus laoreet volutpat. Sed et urna ipsum. Nulla ultrices quam sem, eu eleifend purus iaculis a. Nunc sit amet congue mauris.
</section>
</div>
<script>
var options = {
$menu: true,
menuSelector: 'a',
panelSelector: 'section',
namespace: '.panelSnap',
onSnapStart: function(){},
onSnapFinish: function(){},
directionThreshold: 20,
slideSpeed: 200
};
$('.panel_container').panelSnap(options);
</script>
</body>
js位于此处; https://github.com/guidobouman/jquery-panelsnap/blob/master/jquery.panelSnap.js
基本上我只是复制了附带菜单的演示文件。我添加了选项脚本部分，启用了菜单。我确保所有的名字都是它们应该是的，并创造了一些嘴唇，所以有实际的空间滚动。
我的第一个注意事项是演示说菜单应该转到'/ first'，我将其更改为'#first'，因为/不表示锚点。
所以除了这一点我无法找到我的代码有什么问题，我希望有人可以给我一个正确的方向。
答案 0 :(得分：1)
尝试从以下位置更改脚本：
var options = {
$menu: $('header .menu')
};
$('.panel_container').panelSnap(options);
成为：
$(document).ready(function() {
var options = {
$menu: $('header .menu')
};
$('.panel_container').panelSnap(options);
});
请参阅here了解$(document).ready();包装器所需的原因。
答案 1 :(得分：1)
首先，取出底部的额外脚本标签，并将头部脚本标签放在其中。然后将面板容器样式设置为position: absolute和overflow: scroll。
这应该足以让它发挥作用。但是，根据屏幕的大小，它可能无法正常工作，因为每个面板的高度以像素为单位指定。将面板容器和截面高度更改为100％对我来说效果更好。这是一个working fiddle，这是我的css在这些变化后的样子：
.panel_container {
position: absolute;
overflow: scroll;
height: 100%;
}
section {
height: 100%;
}