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

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

commented: very helpful +1

Thats perfect, thanks! :D

Glad to help! Love the sig btw ;)

It's too true to deny xD

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.