Question

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

标记如下：

<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中最简单的方法。

Answer 2

我最终能够达到预期的效果。

我必须更改我的标记，以便命令栏位于主包装div内。这样，在较小的页面上（不需要滚动），命令栏将位于div的顶部而不强制滚动条。

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

以下代码负责根据页面的滚动位置调整命令栏位置。基本上我们在滚动时检查视口是否与页脚重叠：

$(function () {

  var setCommandBarPosition = function () {
    var footerOffset = $("#footer").offset().top,
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        commandBarHeight = $("#command-bar").height(),
        weOverlappedFooter = ((windowHeight + scrollTop - commandBarHeight) >= footerOffset);

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

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

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

  setCommandBarPosition();
});

除了标准的粘性页脚CSS之外，我们确保在到达页脚时将命令栏设置为绝对值：

#command-bar {
  bottom: 180px;
  height: 40px;
  width: 100%;
  background-color: black;
  position: absolute;
  z-index: 1;
}
p {
  color: white;
}
#command-bar.affix-bottom {
  position: fixed;
  bottom: 0;
}

http://jsfiddle.net/benfosterdev/TKMaa的工作演示。

Answer 3

@ BenFoster的回答并不适合我，weOverlappedFooter从来都不是真的（也许是因为我把左边的栏放在＆＃34;顶部：＆＃34;而不是＆＃34;底部＆＃34;在CSS中。

对于webOverlapped计算，我使用了以下内容：

    footerOffset = $("footer").offset().top
    commandBarTop = 30; // had to copy this value from css, not completely DRY solution
    commandBarBottom = $("#command-bar").outerHeight( true)+navBarTop+$(window).scrollTop();
    weOverlappedFooter = ((commandBarBottom) >= footerOffset);

和CSS

affix-bottom {
    position:absolute;
    top:initial;
    bottom:40px;
}

否则我使用了Ben的其余解决方案。

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

更新

3 个答案: