Блог

Я хотел бы, чтобы нижняя панель навигации прилипала к нижней части страницы при отображении со следующим поведением:

 * 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>
  

Используйте jQuery, измените 100 на желаемый лимит символов.

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

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

Демонстрация загрузки