【发布时间】：2020-01-30 05:07:31
【问题描述】：
我想知道在我通过滚动页面到达它之前，侧边栏是否可能是静态的？ 我希望它位于 Jumbotron 之后，然后在向下滚动时粘在左侧和顶部。不像现在这样，z-index、margin、offset 显然不起作用……
我想知道这是否可能。
这里是所有代码，除非你像 gitpod 等在你的 IDE 上弹出它，否则它不起作用。请复制。 Demo
这里只有 HTML /
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Titul </title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
</head>
<body>
<header>
<nav class="nav nav-pills flex-xm-row fixed-top nav-custom">
<a class="flex-sm-fill text-sm-center nav-link" id="about" href="#">Home</a>
<a class="flex-sm-fill text-sm-center nav-link" id="experience" href="#">Smth</a>
<a class="flex-sm-fill text-sm-center nav-link" id="contact" href="#">Number 3</a>
<a class="flex-sm-fill text-sm-center nav-link" id="cv" href="#">Number 4</a>
</nav>
</header>
<section id="about">
<div class="jumbotron jumbotron-fluid jumbotron-about">
<div class="container">
<img src="assets/images/avatr.jpg" class="avatar img-fluid" alt="Profile Picture">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</section>
<div class="row">
<div class="col-sm-1 col-md-3 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
</div>
<div class="col-sm-1 col-md-3 hidden">
</div>
<div class="col-sm-11 col-md-9 order-10">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
我没有看到侧边栏，请您说的更清楚些
-
在我发布所有代码 css 的页面上为什么不加载 idk，并且它没有显示任何侧边栏...我不知道如何附加它所以它是可见的，这就是为什么我要求请将其复制并粘贴到任何 IDE 上，然后应该可以看到
-
您只能使用 javascript 来做到这一点。
标签： html css bootstrap-4 css-position sidebar