滚动页脚底部定位

scrollify footer bottom positioning

本文关键字：定位 底部 滚动      更新时间：2023-09-26

已经有一段时间了，我一直在试图自己解决这个问题。我正在使用横向jquery。我总共有五个部分和滚动工作完全没问题。我想让页脚显示在最后一个名为"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"));
   });
});

所以基本上我想把footer-wrapper放到第五部分的页面底部。但事实是，它超出了部分范围。移除绝对会使页脚向上，并在底部形成一个缺口。我不能给出margin-top因为在不同的屏幕上，它会产生问题。

我已经使用了这个插件名为scrollify - http://codepen.io/gam3ov3r/pen/zrdqy

你试过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();

因此，交易是检测"Section 5 has showed"/"Section has passed hidden"。或者"A section has taken place, section #X"， if(X ==5)， if(X!=5)…"

将#footer-wrapper设为绝对值，而将设为相对div。这个相对div可以，应该是。因此,# footer-w……是绝对的，相对于section，而不是body，并且你只会在section 5中看到footer。

这只是CSS。

CSS: 

section5 {
position:relative
}
#footer-wrapper {
   /* what you already did */
}

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

相关文章：