I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve.
Test it live here:
Everything seems fine until you scroll; the sidebar sticks to the top of the page but remains hidden behind the fixed header. How can I prevent it from being hidden behind the header and position it correctly? Is there a way to add smooth animation to it?
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>LOAI Design Studio</title>
<meta name="description" content="LOAI Design studio"/>
<meta name="keywords" content="">
<meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />
// No changes made in the remaining HTML code...
</body>
</html>
The CSS:
/*Portoflio Project Page*/
#portfolio-projectPage{
text-align: left;
position: relative;
}
// No changes made in the CSS code...
And Finally The JavaScript bit:
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $StickyBox= $('.detailsBox');
var $window = $(window);
$window.bind("scroll resize", function() {
var gap = $window.height() - $StickyBox.height() - 10;
var visibleFoot = 255 - $window.scrollBottom();
var scrollTop = $window.scrollTop();
if(scrollTop < "auto" + 10){
$StickyBox.css({
top: (200 - scrollTop) + "px",
bottom: "auto"
});
}else if (visibleFoot > gap) {
$StickyBox.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$StickyBox.css({
top: 0,
bottom: "auto"
});
}
});