How to prevent a div with position: fixed to stay in the outer div and prevent it from overlapping to the footer of the website.
For example, I have a div, and I want to scroll the div within the content div between the header and footer sections and not move from the div outside the content.
My code for this:
HTML
<div id="fixed_div"></div>
CSS
#fixed_div {
background: none repeat scroll 0 0 #F1F1F1;
padding: 10px;
position: fixed;
width: 290px;
z-index: 99;
}
There is a plugin for jQuery called Waypoints. It allows you to detect when an element has been scrolled to. http://imakewebthings.com/jquery-waypoints/
$('.footer').waypoint(function(direction) {
$('#fixed_div').hide();
});
Its API is quite helpful and should be able to suit your needs.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments