Я хочу знать, возможно ли сохранение боковой панели c, пока я не достигну ее с помощью прокрутки на странице? Я хочу, чтобы он располагался после Jumbotron, а затем двигался влево и вверх при прокрутке вниз. Не будучи на вершине всего, как сейчас, z-index, margin, offset не работают, по-видимому ...
Я хотел бы знать, возможно ли это вообще.
Вот весь код , не работает, пока вы не вставите его в IDE, например, gitpod et c. Просто скопируйте, пожалуйста. Демо
Только 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>