javascript - 在浏览器上滚动时将主菜单渲染到固定的导航栏中

Question

我正在使用 bootstrap 最新版本。

我创建了一个主菜单，如下所示:

这是我的 html View 中的代码:

<div class="container">
    <div class="row">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-folder-close"></span>
              <p>header Menu 1</p>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-flash"></span>
              <p>header Menu 2</p>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-list-alt"></span>
              <p>header Menu 3</p>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-home"></span>
              <p>header Menu 4</p>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-nav">
                    <span class="glyphicon glyphicon-wrench"></span>
              <p>header Menu 5</p>
                </button>
            </div>
        </div>
    </div>
</div>

现在我想，当用户滚动时，将此菜单更改为固定在顶部的导航栏，如下所示(check the link to have a better idea，滚动以查看动画):

这是导航固定在顶部的代码:

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dropdown-thumbnail-preview">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand active" href="#">Brand</a>
        </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="dropdown-thumbnail-preview">
        <ul class="nav navbar-nav">
            {# Suivis Fluides #}
            <li class="dropdown thumb-dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Header Menu 1 <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">
                            sub menu 1
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            sub menu 2
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
            {# Suivis Contrats #}
            <li class="dropdown thumb-dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Header Menu 2 <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">
                            sub menu 1
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            sub menu 2
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
            {# Gestion Patrimoines #}
            <li class="dropdown thumb-dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Header Menu 3 <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">
                            sub menu 1
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            sub menu 2
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
            {# Gestion Equipements Technique #}
            <li class="dropdown thumb-dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Header Menu 4 <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li class="divider"></li>
                        <li><a href="#">
                            sub menu 1
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            sub menu 2
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
            {# User #}
            <li class="dropdown thumb-dropdown navbar-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Header 5 <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li class="divider"></li>
                    <li><a href="#">
                            sub menu 1
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            sub menu 2
                            <div class="thumbnail">
                                <img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="q">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
        </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

这个问题的目的是在用户滚动时将我的主菜单呈现为固定在顶部的导航栏。

有人知道最好的解决方案是什么吗？

Answer 1

你可以使用类似 Prinzhorn/skrollr 的东西或 imakewebthings/waypoints定义，何时(谈论滚动位置)添加/删除使 navbar 粘性的类。