如何使“navbar-fixed-bottom”在响应模式下单击按钮时向上滑动？ （引导） [英] How to make "navbar-fixed-bottom" slide up when button is clicked in responsive mode? (bootstrap)

问题描述

当按钮在手机屏幕或窄窗口上按下时，底部的Twitter Bootstrap的导航栏（用作页脚）会向下滑动。

Currently Twitter Bootstrap's navbar at the bottom (used as footer) slides "down" when the button is pushed on a phone screen or narrow window.

我想让菜单滑动向上，而不是默认的下..任何想法如何我可以用twitter bootstrap做这个？

I want the menu to slide "up" instead of the default "down".. Any ideas on how I can do this with twitter bootstrap?

在navbar页脚的视图层中使用的代码如下：

the code used in the view layer of the navbar footer is as follows:

<footer id="footer" class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar dropup" data-toggle="collapse" data-target=".show-footer">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="nav-collapse collapse show-footer">
                <nav>
                    <ul class="nav pull-right">
                        <%= g_about_link(yield(:title)) %>
                        <%= g_contact_link(yield(:title)) %>
                        <%= g_faq_link(yield(:title)) %>
                        <%= g_careers_link(yield(:title)) %>
                        <%= g_privacy_link(yield(:title)) %>
                        <%= g_quotes_link(yield(:title)) %>
                        <%= g_terms_link(yield(:title)) %>
                        <li><a href="http://news.railstutorial.org/" target="_blank">News</a></li>

                    </ul>
                </nav>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</footer>

推荐答案

滚动到页面底部， ）event callback：

Scroll to the bottom of the page using a show() event callback:

http://jsfiddle.net/Apx5N/2/

$(function() {
  $('.collapse.show-footer').on('show', function () {
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  });
});


<div class="container">
  ...

  <div class="nav-collapse show-footer collapse"> ... </div>
</div>

这篇关于如何使“navbar-fixed-bottom”在响应模式下单击按钮时向上滑动？ （引导）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！