Question

我希望在显示时有一个底部导航栏粘在页面底部，但行为如下：

* shown:
    1. When the page content height is smaller than the page height
    2. When the bottom of the page is reached
* hidden:
    When the page content is long enough, i.e. it fills more than the page height and page bottom is not reached

我目前正在使用bootstrap3及其CSS类navbar-fixed-bottom，但导航栏始终可见。当内容足够长时，我希望它被隐藏。

<div class="content">
    CONTENT GOES HERE, length varies depending on the page
</div>

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href=“#">Link one</a></li>
                    <li><a href=“#">Link two</a></li>
                    <li><a href=“#">Link three</a></li>
                </ul>
                <ul class="nav nav-pills pull-right">
                    <li class="copyright"></li>
                </ul>
            </div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </div>
</footer>

Answer 1

使用jQuery，将100更改为所需的字符限制。

$(document).ready(function() {
  var len = $('.content').text().length;

  if(len > 100){
     $('footer').addClass('hidden');
  }
});

Bootply demo

Bootstrap3：navbar-fixed-bottom有条件地隐藏，具体取决于内容长度

1 个答案: