0

我正在尝试在我的网站中实现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>以及任何其他没有包含在 section 类中的东西。有可能避免这种情况吗？

4

2 回答 2

5

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

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

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

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

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

于 2016-06-06T11:35:45.393 回答
1

如果它起作用，<section>可能很难避免这种情况。

<div>也许只是像这样包裹你<section>：

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

您将一切正常，您还可以管理“选项”部分中描述的所有选项

于 2015-07-20T13:28:14.443 回答