如何制作可折叠的引导导航栏？

Question

I'm trying to make a fixed-top navbar that will collapse/fold as the user scrolls down, and will reappear/unfold the instant they scroll up even if they're at the bottom of the page. 我正在尝试制作一个固定顶部的导航栏，该导航栏将在用户向下滚动时折叠/折叠，并且即使他们在页面底部，也会在滚动向上的瞬间重新出现/展开。

I'm not even sure where to begin with this. 我什至不知道从哪里开始。 Here's the basic layout I'm experimenting with: 这是我正在尝试的基本布局：

http://jsfiddle.net/pp5dLdxw/ http://jsfiddle.net/pp5dLdxw/

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="padding-top:70px;">

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">foo</a>
        </div>
    </div>
</nav>

<div class="container">
    <div class="jumbotron" style="height:900px;">bar</div>
</div>

</body>
</html>

Answer 1

Found https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar 找到了https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar

With some really simple steps to set it up: 通过一些非常简单的步骤进行设置：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="dist/jquery.bootstrap-autohidingnavbar.min.js"></script>

$(".navbar-fixed-top").autoHidingNavbar({
  // see next for specifications
});

如何制作可折叠的引导导航栏？

问题描述

1 个解决方案

解决方案1
0 2014-10-20 04:11:14

如何制作可折叠的引导导航栏？

问题描述

1 个解决方案

解决方案1 0 2014-10-20 04:11:14

解决方案1
0 2014-10-20 04:11:14