Question

我有一个粘性页脚，我正在使用此设置（使用LESS变量）：

<style>
   html,body {height: 100%;}
   .outer {height:auto!important;min-height: 100%;margin-bottom: -1 * (@footerHeight);}
   footer, .push {height: @footerHeight)}
</style>

<div class="outer">
  Content here
<div class="push"></div>

</outer>

<footer>
  Footer here
</footer>

这很有效。现在我在浏览器的底部添加了一个始终可见的栏，当向下滚动时，它应该停留在现有页脚的顶部。（实际上，我将页脚的内容拆分为应始终可见的部分，以及仅在向下滚动时可见的部分）。这样的工作方式如下：

<style>
  .visibar {        
    z-index: 1000;

    &.affix-bottom {
        position: absolute;
        bottom: @footerHeight;
    }
    &.affix {
        bottom: 0px;
        position: fixed;
    }
  }
</style>

JavaScript：

$('.visibar').affix({
  offset: {
bottom: footerHeight
  }
})

正如你所看到的，我正在寻找两个地方的底部距离，因为如果我不这样做，它将无法工作。在大多数页面上，设置工作正常，但在某些页面上，内容较少，页脚完全可见，.visibar不在页脚顶部，而是在屏幕底部，在页脚上方。 FireBug确实表明该类是.affix，而不是affix-bottom。我该如何解决这个问题？

我试图弄清楚它，请参阅http://jsfiddle.net/mGy2u/37/，但现在整个粘在底的东西都行不通。

Bootstrap粘性页脚+顶部粘条

0 个答案: