滚动页脚底部定位

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 节何时显示或不显示，并随之显示 show()/hide() #footer-wrapper。

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

因此，处理是检测“第 5 节已显示”/“第 5 节已通过隐藏”。或者更好的是“一个部分已取代，第 #X 部分”，if (X==5), if(X!=5)..."。

Answer 2

将#footer-wrapper 设为绝对，但在相对的div中。这个相对的 div 可以，应该是。因此，#footer-w... 是绝对的，相对于部分，而不是正文，您只会在第 5 部分看到页脚。

这只是 CSS。

CSS：

section5 {
position:relative
}

#footer-wrapper {
   /* what you already did */
}

阅读：https://css-tricks.com/absolute-positioning-inside-relative-positioning/