javascript - 滚动页脚底部定位

Question

一段时间以来，我一直在尝试自己解决这个问题。我正在使用 scrollify jquery .我总共有五个部分，scrollify 工作得很好。 我希望页脚显示在最后一个名为“五”的部分中，但它不在该部分中。

这是我的代码:

<section class="panel five" data-section-name="five">
   <div class="contactus bottom-10">
      <!-- IT WAS JUST A CONTACT US FORM, I removed it so the code looks easy and small -->
   </div>
   <!-- end contact us -->

   <div id="footer-wrapper">
      <footer>
         <!-- FOOTER CODES --> 
      </footer>
   </div> <!--end footer wrapper -->
</section>

CSS

#footer-wrapper {
   width:100%;
   position:absolute;
   bottom:0;
   height: 50px;
}

部分jquery

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

   $.scrollify({
      section: ".panel" //This is the part to detect section ?
   });

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

所以基本上我想将页脚包装器放在第五部分的页面底部。但碰巧是它超出了该部分。 移除 absolute 会使页脚向上并在底部形成一个缺口。我不能给 margin-top 因为在不同的屏幕上，它会导致问题。

我用过这个名为 scrollify 的插件 - http://codepen.io/gam3ov3r/pen/zrdqy

Answer 1

好吧，你试过用fixed代替absolute吗？

#footer-wrapper {
 width:100%;
 position:fixed;/* <== */
 bottom:0;
 height: 50px;

 z-index:999;/* could be useful... */
}

编辑 此外，您必须使用 JS/JQuery 来隐藏/显示它。 absolute 和 fixed 适用于整个 html 页面。因此，您必须检测第 5 节何时显示或不显示，然后显示()/隐藏()#footer-wrapper。

var isSection5_displayed = /* ... check it here ... */;
if(isSection5_displayed) $("#footer-wrapper").show()
else $("#footer-wrapper").hide();

因此，处理是检测“Section 5 has showed”/“Section has passed hidden”。或者更好的是“一个部分已经取代，第 #X 部分”，如果 (X==5)，如果 (X!=5)...”...