How to fix a div inside bootstrap slide Menu - html

Question

Iam trying to fix a div always on top in slide menu.scroll needs only for the bellow contents how can i fix this issue? please check my fiddle
https://jsfiddle.net/kannankds/j79hggn3/
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="topHead"> <!--need to fix this area-->
<input type="text"><input type="button" class="btn btn-info" value="ok">
</div> <!--area ends-->
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="content-header">
<h1 id="home">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
</h1>
</div>
</div>
https://jsfiddle.net/kannankds/j79hggn3/

Answer 1

#sidebar-wrapper .topHead{
position: absolute;
top: 0;
}
#sidebar-wrapper ul{
margin:0px;
padding-top:50px;
overflow: auto;
height: 100%;
}
use absolute position for sidebar top head and set height to the ul and add overflow scroll to the menu items conatiner ul .Check if it works https://jsfiddle.net/31ndd6kk/4/

Answer 2

<div id="wrapper">
<!-- Sideba][1]r -->
<div class="topHead"> <!--need to fix this area-->
<input type="text"><input type="button" class="btn btn-info" value="ok">
</div> <!--area ends-->
<!--//// Do as follow ////
1. add your scroll to id 'sidebar-wrapper'
2. set the height to 'sidebar-wrapper'
-->
<div id="sidebar-wrapper">
<ul>
<li>menu1</li>
...
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="content-header">
<h1 id="home">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
</h1>
</div>
</div>

Answer 3

Check this Updated fiddle here
Changes in CSS:
#sidebar-wrapper ul {
height: calc(100% - 34px);
overflow: auto;
}
#wrapper.active {
position: absolute;
left: 250px;
}
Note: comment or remove the #sidebar-wrapper style overflow-y: auto.