Search code examples
cssfixedsticky

Stop fixed div on specific DIV

I have this code to make my sidebar sticked when scrolling down. However, this let the sidebar scroll to the bottom of the page, which overlaps other elements on the site.

$(function () {
    var counter = 0;
    var s = $("#counter");
    var pos = s.position();
    $(window).scroll(function () {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });

});

<div id="sidebar">	
  <div id="counter">
   * php dynamic_sidebar( 'Sidebar' ); *
  <div class="clear"></div>
  </div>		
</div>

I have searched for an hour now without finding any solution. I want the sidebar to stop being sticked when the scroll reach the div footer.

Solution

  • You will have to use css to tackle this issue. Just add padding from bottom equal to the height of the element at the bottom.

    Suppose if you have a footer with height 50px.Then add padding-bottom:50px to the sidebar and give footer some z-index also like z-index:9 or z-index:99.

    Let me know if this helps.

    Thanks