<div style="width: 800px;border: solid 1px;">
<div style="float: left; width: 200px; margin-right: 5px; background-color: red;overflow: scroll;height: 100px;">
My Heading
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
This is our left text column.
</div>
</div>
<div>Some Page Content </div>
<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
</tr>
</thead>
</table>
<div style="max-height: 200px; overflow: auto;">
<table id="test">
<tbody>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
</tbody>
</table>
</div>
<div>Some Page Content </div>
Please let me know if you have any other issues.<HTML>
<HEAD>
<script src="js/jquery-1.10.2.js"></script>
<title>Scroll Fixed </title>
<style type="text/css">
#header{
width: 200px;
height: 300px;
overflow: scroll;
}
</style>
<SCRIPT>
$(document).ready(function() {
var div = $('#header');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>
</HEAD>
<BODY>
<div id="header">
<h1>Fixed HEader</h1>
</div>
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
</BODY>
</HTML>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>Scroll Fixed </title>
<style type="text/css">
#header{
width: 100%;
height: 100px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var div = $('#header');
var start = $(div).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(div).css('position', ((p) > start) ? 'fixed' : 'static');
$(div).css('top', ((p) > start) ? '0px' : '');
});
});
</script>
</head>
<body>
<div id="header">
<h1>Fixed HEader</h1>
</div>
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
</body>
</html>
Check & let me know if this is what you are expecting..