Jas*_*dle 0 html css jquery jquery-scrollify
我试图在我的网站上实现jQuery Scrollify插件.但是这个插件假设我的网站结构只有sections但不是.我的意思是网站的结构是
<body>
<div class="mobilenav">
....
</div>
<header id="header">
....
</div>
<section class="section section1"> Section 1 </section>
<section class="section section2"> Section 2 </section>
<section class="section section3"> Section 3 </section>
<section class="section section4"> Section 4 </section>
<section class="section section5"> Section 5 </section>
<div class="footer">
....
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
这是我实现它的方式
$(function() {
$(".section").css({"height":$(window).height()});
$.scrollify({
section:".section"
});
$(".scroll").click(function(e) {
e.preventDefault();
$.scrollify("move",$(this).attr("href"));
});
});
Run Code Online (Sandbox Code Playgroud)
所以问题是当网站被加载时,当我滚动时它只显示<section>..它没有显示<header>,<footer>以及其他任何未包含在节类中的内容.有可能避免这种情况吗?
Scrollify部分在Scrollify的初始化中定义.它们是用户定义的,因此它们可以是您想要的任何东西
$.scrollify({
section:"this-is-a-css-selector"
});
Run Code Online (Sandbox Code Playgroud)
关于页眉和页脚,您可以使用interstitialSection.这将使您的初始化看起来像这样:
$.scrollify({
section:".section",
interstitialSection:"#header,.footer"
});
Run Code Online (Sandbox Code Playgroud)
这样Scrollify仍会滚动到它们但不会操纵它们的高度.