I have a sidebar in my code that I found from this source. The issue I am facing is that when the content on the page becomes too long, the body scrolls but the sidebar remains static.
For reference, you can view an example fiddle here.
While I would like my sidebar to function similarly to the one in the example above, I encounter an unwanted effect due to a header as shown here.
Here's a snippet of the HTML:
<title>Simple Sidebar - Start Bootstrap Template</title>
<body>
<!--Header-->
<div id="header-content-wrapper" class="as-header-wrapper">
<div class="container-fluid">
<div id="header" class="row">
<div class="col-md-7 panel">
<span>This is heading text!!!</span>
</div>
</div>
</div>
</div>
<div id="wrapper" class="">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"> <a href="#">
Start Bootstrap
</a>
</li>
<li> <a href="#">Dashboard</a>
</li>
(other list items here)
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
(content continues...)
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And this is the CSS styling related to the sidebar and its behavior:
(CSS code snippet)
My goal is to prevent the sidebar from scrolling along with the content by adjusting the position property in the CSS. Any suggestions or advice on achieving this are highly appreciated!