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

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/

<!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>

1 个解决方案

#1

Found 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

更多相关文章

随机推荐