javascript - Jquery 移动底部导航栏

Question

我有一个问题，真的不知道如何解决这个问题。我有一个像这样的粘性页脚:

<!-- FOOTER ICON TABS -->           
          <div data-role="footer" data-position="fixed" data-tap-toggle="false">        
            <div class="footer" data-role="navbar">
              <ul>
                <li>
                  <a href="#dashboard" data-icon="dashboard" class="ui-btn-active" id="icon-dashboard">
                    <span class="navbar-text">Dashboard</span>
                  </a>
                </li>
                <li>
                  <a href="#" data-icon="progress" id="icon-progress">
                    <span class="navbar-text">Voortgang</span>
                  </a>
                </li>
                <li>
                  <a href="#map" data-icon="security" id="icon-security">
                    <span class="navbar-text">Plattegrond</span>
                  </a>
                </li>
                <li>
                  <a href="#" data-icon="security" id="icon-security">
                    <span class="navbar-text">Securitycheck</span>
                  </a>
                </li>
              </ul>   
            </div>
          </div>

因此我设置了这个样式:

.ui-footer, .footer, .footer li, .footer a, .footer a:after {
    background-color: transparent !important;
    border-color: transparent !important;
    height: 70px;
}

但这很烦人，因为我的内容在图标后面而且不太好。它看起来像这样:

我已经改变了白色方 block 的高度，但方 block 的高度并不固定。这是因为通知 block 是动态的，内容因长度而异。因此，第二个 block 有一个可折叠的 block ，其中写有登机牌。

它的外观:

这是一个FIDDLE这重现了问题。我希望有人能帮我解决这个问题:)

Answer 1

你可以只设置下边距:

#flight-info-block {
  margin-bottom: 80px !important;
}

同样在代码中，使用slideToggle函数的第三个parametef在动画结束时实现同样的效果:

//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle("slow", "swing", function() {
    $("#flight-info-block").css("margin-bottom", "80px");
    $("#flight-info-block").trigger("updatelayout");
});

顺便说一句:我也不喜欢透明背景，然后我在你的 CSS 底部添加了以下规则:

.footer {
  background-color: #00a0e5 !important;
}

并删除了 scrollTop 中的 -350 偏移量:

$('html, body').animate({
    scrollTop: $header.offset().top
}, 1000);

您更新的 fiddle :http://jsfiddle.net/yTt9b/1787/