Float when object reaches top of the screen

[mmcdonald]

Hi all,

I have a menu on the left side of my design. When the user scrolls and the object hits the top of the screen I want it to float there. I have the float working fine now, but how can I say "Only float when you meet the top of the display?"

This is the CSS for the object:

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            position:fixed !important;
            position: absolute; /*ie6 */
}

Thanks in advance,
Michael

[EvolutionFallen]

Hmm, you'd need JavaScript for this to work. Do you know JS?
I don't have time to write the code right now and test, but here's probably how I'd do it:

1. Originally set .well's position to relative
2. Get the original y-coordinate of the top of the menu
3. If the y-coordinate of the top of the browser viewport is >= to #2 above, change the positioning of .well to fixed.
4. If the y-coordinate then becomes < #2, toggle back to relative

This may prove useful for finding offsets:
http://stackoverflow.com/questions/1567327/using-jquery-to-get-elements-position-relative-to-viewport

[mmcdonald]

Thats perfect, thanks! :D

[EvolutionFallen]

Glad to help! Love the sig btw ;)

[mmcdonald]

It's too true to deny xD