javascript - 如何制作可折叠的 Bootstrap 导航栏?

标签 javascript html css twitter-bootstrap

我正在尝试制作一个固定顶部的导航栏,它会在用户向下滚动时折叠/折叠,并会在他们向上滚动时重新出现/展开,即使它们位于页面底部也是如此。

我什至不确定从哪里开始。这是我正在试验的基本布局:

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>

最佳答案

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

通过一些非常简单的步骤来设置它:

<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
});

关于javascript - 如何制作可折叠的 Bootstrap 导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26458370/

相关文章:

css - 滚动的 flex 容器不适合居中的元素

html - 响应式 HTML 表格在移动设备上剪切

Javascript 复制字符串的速记方法

如果没有选中复选框,JavaScript 将在点击事件上发出警报

html - 尝试使用 CSS 中的 'content' 显示 Logo

javascript - 如何自动调整 contenteditable 元素?

html - 最小化浏览器窗口时恒定的 div 大小

javascript - firebase auth.js:12未捕获的TypeError:无法读取未定义的属性“close”

javascript - 在 jQuery 中选中复选框时,如何将项目添加到列表中?

javascript - Sir Trevor CSS 的样式无法正确显示 Ruby On Rails 应用程序