Sticky floating issue

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

Its hard to tell what is really going on here, could you include the html and css?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.