Question

我尝试制作一个固定顶部导航栏，当用户向下滚动时会折叠/折叠，并且即使它们位于页面底部，它们也会在它们向上滚动的瞬间重新出现/展开

我甚至不确定从哪里开始。这是我尝试的基本布局：

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

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

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

1 个答案: