Search code examples
cssfooter

I have an element with position fixed to make it float - how can I prevent it floating when it reaches the footer?

I want my floating sidebar to stop before it hits the footer - the only solutions I have found so far involve using javascript, but I'd prefer if there were a way to go without if possible!

a baisc example: jsfiddle example

By adding the code below, I can get it to stop, but it then pushes everything inside my sidebar way up the page:

bottom: 500px;
Solution

  • This is not exactly what you are looking for, because I can't think of any solutions that don't involve any JS

    What you can do though - if you give the footer element a position (relative or absolute), the sidebar will slide down behind as the page scrolls.

     .footer
        {
            width: 100%;
            border: 1px solid green;
            height: 500px;
            background-color: green;
            position:relative;
        }