在网站中实现 scrollify

Question

我正在尝试在我的网站中安装 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>

下面是我的实现方式

$(function() {
 $(".section").css({"height":$(window).height()});
  $.scrollify({
    section:".section"
  });


  $(".scroll").click(function(e) {
    e.preventDefault();
    $.scrollify("move",$(this).attr("href"));
  });
});

所以问题是当网站加载时，当我滚动它时它只显示 <section>.. 它不显示 <header>、<footer> 和其他任何不是包含在 class 部分中。是否可以避免这种情况？

Answer 1

如果它适用于 <section>，则很难避免这种情况。

也许可以像这样将 <div> 包装成 <section> :

<section>
 <div>
 </div>
</section>

您将使一切正常运行，并且您还可以管理 'Options'

部分中描述的所有选项 here

Answer 2

Scrollify 部分在 Scrollify 的初始化中定义。它们是用户定义的，因此它们可以是您想要的任何东西。

$.scrollify({
    section:"this-is-a-css-selector"
});

关于页眉和页脚，您可以使用 interstitialSection。这将使您的初始化看起来像这样：

$.scrollify({
    section:".section",
    interstitialSection:"#header,.footer"
});

这样 Scrollify 仍然会滚动到它们，但不会操纵它们的高度。

在网站中实现 scrollify

Implementing scrollify in website

html

css

jquery

jquery-scrollify