Hi there,
I have the following code which displays a sticky side bar that starts scrolling when the window is scrolled past a div
with an ID of #sticky-trigger
. This works fine, but when the page gets to a certain point, the sticky div
stops floating down.
if ($("#stickybar").length == !0) {
var sticky = $("#stickybar"),
topPadding = 30,
navHeight = $("#top-nav").height(),
offset = sticky.offset().top - navHeight - topPadding,
checkScroll = $("#sticky-trigger").height() + (navHeight * 2) - sticky.height(),
scrollLimit = $("#sticky-trigger").height() - sticky.offset().top - (navHeight * 2) - topPadding;
$(window).scroll(function() {
if ($(window).scrollTop() > (offset - topPadding)) {
sticky.css({
"position": "fixed",
"top": navHeight + "px"
});
} else {
sticky.css({
"position": "relative",
"top" : "0px"
});
}
if ($(window).scrollTop() >= checkScroll) {
$("#stickybar").css({
"position" : "absolute",
"top" : scrollLimit + "px"
});
}
});
}
Any ideas what I have wrong?
Thanks