Question

我已经有一段时间试图自己解决这个问题了。我正在使用scrollify jquery。我总共有五个部分，并且scrollify工作得很好。我希望页脚显示在名为“five”的最后一节中，但它不在该部分中。

这是我的代码：

<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"));
   });
});

所以基本上我想把页脚包装器放到页面底部，第五部分。但恰巧是它超越了这个部分。删除绝对会使页脚向上，并在底部创建一个空隙。我不能给予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节，然后显示（）/ hide（）＃footer-wrapper。

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

因此，该交易是检测“第5节已显示”/“部分已通过隐藏”。或者更好的“如果（X == 5），如果（X = = 5）......”，那么“一个部分占据了位置，部分#X”。

Answer 2

使＃footer-wrapper绝对，但在相对div 。应该是这个相对的div。因此，＃footer-w ...是绝对的，相对于section而不是body，你只会在第5节看到页脚。

只有CSS。

CSS：

section5 {
position:relative
}

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

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

滚动页脚底部定位

2 个答案: