I am using Bootstrap 5, trying to make responsive card ads. left card. For some reason, the sticky-top won't work.
I'm trying to create a sticky sidebar on the left. The sidebar menu is inside a grid column. I'm using the sticky-top class as shown in this question, but it still doesn't work.
Here is my code:Here is my code; I am not aware of any possible collisions with sticky-top.
<!Docktype html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<title>Selda</title>
</head>
<body data-new-gr-c-s-check-loaded="8.904.0" data-gr-ext-installed="">
<nav >
<div >
<a href="#">Selda</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a href="">Home</a>
</li>
<li >
<a href="">Products</a>
</li>
<li >
<a href="">Counselings</a>
</li>
<li >
<a href="#">Learning</a>
</li>
<li >
<a href="">About-US</a>
</li>
<li >
<a href="">Contact-US</a>
</li>
</ul>
<ul >
<li >
<a href="#">Login</a>
</li>
<li >
<a href="#">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<div >
<div >
<div >
<div >
<div style="height: 90px"></div>
<div >
<div >
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" >
<div >
<span >Online</span>
</div>
</div>
<h1 >
<i ></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<h6 >Plan</h6>
</div>
<ul >
<li >
<a href="#">
<div>
<i ></i>
<span>Download PDF</span>
</div>
<span >Free</span>
</a>
</li>
<li >
<a href="#">
<div>
<i ></i>
<span>Download Video</span>
</div>
<span >85,000 $</span>
</a>
</li>
<li >
<a href="#">
<div>
<i ></i>
<span>Download Word</span>
</div>
<span >Free</span>
</a>
</li>
</ul>
<div >
<button >Payment</button>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<h6 >About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h6 >My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js "></script>
</body>
</html>
The menu div is the one I'd like to stick to the top as the user scrolls down.
CodePudding user response：
It looks like the issue is that the sticky-top class is not being applied to the correct element. In your code, it is being applied to the navbar element, but it should be applied to the sidebar column that you want to make sticky.
Try adding the sticky-top class to the col-lg-4 element that contains the sidebar menu, like this:
<div >
Also make sure that the parent element of that sidebar column has a position property set to relative, so that the sticky element can be positioned relatively to it.
<div style="position:relative">
You may also add a top property to the sticky element for better positioning.
<div style="top:50px">
This should make the sidebar menu sticky on the left as you scroll down the page.
CodePudding user response：
The problem is that elements only stick to their parent element, so the menu stays within the column. You should separate your page to two large columns: one for all the other rows/columns and the other for your sidebar that will stay sticked to the top. Try this (although you may have to change some padding/margins due to nested rows):
<div >
<div >
<div >
<div >
<div ></div>
<div >
<div style="height: 90px"></div>
<div >
<div >
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" >
<div >
<span >Online</span>
</div>
</div>
<h1 >
<i ></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<h6 >About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h6 >My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<h6 >Plan</h6>
</div>
<ul >
<li >
<a href="#">
<div>
<i ></i>
<span>Download PDF</span>
</div>
<span >Free</span>
</a>
</li>
<li >
<a href="#">
<div>
<i ></i>
<span>Download Video</span>
</div>
<span >85,000 $</span>
</a>
</li>
<li >
<a href="#">
<div>
<i ></i>
<span>Download Word</span>
</div>
<span >Free</span>
</a>
</li>
</ul>
<div >
<button >Payment</button>
</div>
</div>
</div>
</div>
</div>
</div>