I've been looking at this snippet:
The sidebar division is what I'm focusing on right now.
I want the div to scroll along as I scroll down the page, but I need it to stop scrolling when its bottom is in view. The same should apply when scrolling back up and reaching the top of the div.
I'm not even sure where to start figuring out how to do this.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
position: relative;
}
#header {
background:red;
width: 100%;
height: 50px;
position:fixed;
top: 0px;
}
#sidebar {
float:left;
background: blue;
width:120px;
min-height:100px;
position: absolute;
top: 50;
left:0;
}
#footer {
background:red;
width: 100%;
height: 50px;
position:fixed;
bottom: 0px;
}
#content {
margin: 60px 0px 60px 140px;
}
</style>
</head>
<body>
<div id="sidebar">
sidebar<br />
...
(continues with more content)
...
text<br />
text<br />
text<br />
text<br />
text<br />
bottom<br />
</div>
<div id="content">
top<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
...
(continues with more content)
...
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<b...
</div>
<div id="header">
</div>
<div id="footer">
</div>
</body>
</html>