Make DIV scroll with page without using pos:fixed

Question

So I have a div on the LHS of my page and I want it to scroll with the page, using position:fixed works fine but once I decrease the width of the browser window, the div hovers above the other elements on the page and gets in the way. This is obviously a result of the pos:fixed.

Can I make the div scroll with the page without having to use pos:fixed? With JS perhaps? Any advice or suggestions would be appreciated.

    #scrollerDiv{
        position: fixed;
        right:100px;
        top:238px;
        padding: 10px;
        width:48px;
        height:48px;
    }

Answer 1

You can try this:

 $(function(){ //<-----------------------doc ready
    $(window).on('scroll', function () {
      var scrollPos = $(document).scrollTop();
      $('.scroll').css({
         top: scrollPos
      });
   }).scroll();
});

For this i have made a fiddle for you.