div with fixed position

Question

I have a div with style position:fixed and i want it to scroll down the page, but i don't want the div to spill into the page footer. How could i accomplish this?

thanks in advance, shawn

Answer 1

Try this.

CSS

body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/
.mainBody {height:90%;overflow:auto;}

HTML

  <div style="border:1px solid black;">TOP</div>
  <div class="mainBody">
      <div style="height:800px;"></div> <!-- To for scroll -->
      HERE IS Main Body
  </div>

This will transfer the scroll bars from the window, to the div that is showing your content. The TOP div will stay put where ever you want it, so you can position it aboslutely or leave it as is, and have it never collide with your footer, which you can put in your main body div.

Answer 2

I've had the same problem in the past and used a Javascript onscroll event to detect if the position:fixed element is going to collide with the footer. If it is, I change it to position:absolute with a top attribute just above overlapping the footer.

Then when they start scrolling back up the page and it's no longer overlapping the footer, I change it back to position:fixed.

Also, if you're planning to have this element scroll in IE6, I recommend CSS expressions for position:fixed emulation.