是否可以在html页面上的div之后启动侧边栏
是否可以在html页面上的div之后启动侧边栏
提问于 2020-01-29 16:49:56
我想知道侧边栏是否有可能是静态的，直到我在页面上滚动到达它为止？我希望它定位在Jumbotron之后，然后在向下滚动时粘在左侧和顶部。不是在像现在这样的一切之上，z索引，边际，偏移显然不起作用……
我想知道这是否可能。
这是所有的代码，直到你把它像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>回答 1
Stack Overflow用户
发布于 2020-01-30 05:07:32
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59963415
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号