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

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 从来都不是真的（可能是因为我在 CSS 中用“top:”而不是“bottom”定位了左栏）。

对于 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 的其余解决方案。