I've implemented a Jquery code that adds a fixed class to a div when scrolling down. However, I now want to remove this fixed class when it reaches the bottom of the page and replace it with a new one that includes position:absolute; and margin-bottom:200px;. This adjustment is necessary to prevent the box from overlapping with the footer at the end of the page once the scrolling is completed.
To get a better understanding of what I'm trying to achieve, you can view the JsFiddle file here: http://jsfiddle.net/hcb4v21r/
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$("#item-nav").addClass("fixedProfileNav");
}
else{
$("#item-nav").removeClass("fixedProfileNav");
}
});
I initially thought that modifying the code in this way would suffice, but it turned out to be ineffective:
$(document).on("scroll",function(){
if($(document).scrollTop()>80%){
$("#item-nav").removeClass("fixedProfileNav");
}
else{
$("#item-nav").addClass("fixedProfileNavBottom");
}
});
CSS
.fixedProfileNavBottom{
position:absolute;
margin-bottom:200px;
}
I was considering removing the fixed class when the scroll position reaches 80/90 percent of the page, but I am uncertain if this approach is correct.