jquery - 防止固定位置导航栏与粘性页脚重叠

Question

我希望导航栏贴在视口(viewport)的底部，但要防止它与固定高度的粘性页脚重叠。

标记如下:

<div id="wrap">
  <div id="main"></div>
</div>
<div id="footer"></div>
<div id="command-bar"></div>

CSS 符合 cssstickyfooter.com .

您可以在 http://jsfiddle.net/z2C5S/2/ 查看示例.

更新

与以下 JavaScript 更接近，只是在非常缓慢地向上滚动时似乎有点重叠 (http://jsfiddle.net/z2C5S/16)

$(function () {

  var setCommandBarPosition = function () {
    var footerOffset = $("#footer").offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    var weOverlappedFooter = ((windowHeight + scrollTop) >= (footerOffset + 40)); // + the height of the command bar

    $("p").html("Overlapped: " + weOverlappedFooter);

    if (weOverlappedFooter) {
      $("#command-bar").removeClass("affix-bottom");
    } else {
      $("#command-bar").addClass("affix-bottom");
    }
  };

  $(window).scroll(function () {
    setCommandBarPosition();
  });

  setCommandBarPosition();
});

Answer 1

这是我的解决方案:

http://jsfiddle.net/z2C5S/14/

基本上，添加一个看起来像主导航栏的辅助导航栏并将其放在页脚内。在主导航上方为页脚提供一个 z-index，这样当您向下滚动时，页脚和辅助导航会覆盖主导航。

<div id="wrap">
    <div id="main"></div>
</div>

<div id="footer">
    <div id="second-command"></div>
</div>
<div id="command-bar"></div>

* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
}
#main {
    overflow:auto;
    min-height: 800px
}
/* must be same height as the footer */
#footer {
    position: relative;
    margin-top: -180px;
    /* negative value of footer height */
    height: 180px;
    clear:both;
    background-color: #999;
    z-index:2;
}
/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
    /* thank you Erik J - negate effect of float*/
}

#command-bar {
   position: fixed;
   bottom: 0px;
   left: 0;
   right: 0;
   height: 40px;
   background-color: #000;
   z-index:1;
}

#second-command {
  height:40px;
  width:100%;
  background-color:blue;
}

是的，有一小部分你会看到一个重叠另一个，但这是我所知道的 CSS 中最简单的方法。