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

Question

我正在使用 bootstrap 最新版本。

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

这是代码在我的 html 视图中：

<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 or imakewebthings/waypoints 之类的东西来定义，当（谈论滚动位置）到 add/remove 时 class 使 navbar 变粘。

Answer 2

如果您可以选择包含 jquery

，则可以执行如下操作

 $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) //Change this value 280 as per your need
    {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });

Answer 3

考虑到每个导航的结构不同，我建议hiding/showing每个元素的cssclass为[=11] =].那么这只是 adding/removing 当第一个导航滚动等于或超过视口顶部时 class 的问题。

jQuery 看起来像这样：

//Fired when the page is scrolling
$(window).scroll(function() {
    var window = $(this);
    //Create a reference to both navigations
    var buttonNav = $('#buttonNav');
    var fixedNav = $('#fixedNav');

    if(window.scrollTop() >= buttonNav.offset().top) {
        //Hide the buttonNav and Show the fixed nav
        buttonNav.addClass('hidden');
        fixedNav.removeClass('hidden');
    } else {
        //The opposite
        fixedNav.addClass('hidden');
        buttonNav.removeClass('hidden');
    }
}

请记住，您需要为每个导航添加 ID，以便使用 jQuery 引用它们，而 hidden class 只需要 css 属性 display: none; 在里面。希望这有帮助:)

Answer 4

感谢大家，我根据客户的规格为我的项目找到了解决方案。

首先，我向按钮导航栏添加一个id，命名为firstMainMenu。然后，我为名为 secondMainMenu 的导航栏添加一个 id。我为导航栏添加了一个隐藏的 class 并制作了脚本。

这是脚本：

$(window).scroll(function() {
        if ($(this).scrollTop()>222) {
            $('#secondMainMenu').removeClass('hidden').fadeIn();
            $('#firstMainMenu').addClass('hidden').fadeOut('fast');
        } else {
            $('#secondMainMenu').fadeOut('fast');
            $('#firstMainMenu').removeClass('hidden').fadeIn('slow');
        }
    });

这是为我工作的代码。但是这三个答案也是正确的。向大家征求意见。你是最棒的。

如果您对此脚本有任何建议或修改，请不要犹豫。

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

Render a main menu into a fixed navbar when scrolling on the browser

html

javascript

css

navbar

twitter-bootstrap