Pinned dynamic panel, stop scrolling when meets footer

I have a pinned filter for a webpage design which I have pinned 30px above the bottom of the browser window.
It keeps that position as you scroll down but I want it to stick to the top of the footer when it gets to that part of the page, at the moment it stays at the bottom of the browser and overlays the footer.

How can I stop it doing that so when arrives at the footer, it stays above the footer by 30px?