0

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

2
Contributors
4
Replies
9
Views
4 Years
Discussion Span
Last Post by mmcdonald
1

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

Edited by EvolutionFallen: Added link

Votes + Comments
very helpful
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.