0

This is basically a continuation from my previous question.

Seeing that my fixed element is not going to do the trick on a responsive environment, I need to somehow have a small nav menu absolute positioned to the wrapper. scale with the wrapper as the window scales but stay fixed at the top when scrolling.

I guess This will be able with jQuery but I am not to sure how to go about it.

Community
  • 1
  • 1
Gavin Wood
  • 955
  • 3
  • 14
  • 28

1 Answers1

1

You should look into jquery waypoints sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/. This is a really clean way to have elements interact with common window scrolling events

Keith.Abramo
  • 6,952
  • 2
  • 32
  • 46
  • this is much harder than i thought. if you look at : http://imakewebthings.github.com/jquery-waypoints/#documentation right at the top they have the small grey menu. I,m trying to create exactly that. stuck to the top when scrolling and shift when resizing – Gavin Wood Oct 25 '11 at 17:59
  • It looks like the way they do it is they have their nav wrapped in a div which they set the max width to 980px. Then they float the nav in that div right. This will allow the outter div to get smaller as the window resizes causing the nav to move to the left as the screen gets smaller. Look through the css of those elements in firebug to get a better idea of what I am talking about – Keith.Abramo Oct 25 '11 at 19:05
  • So i figured it out and created a solution without having to resort to and Javascript, it is all pure css. if you are interested in my solution here it is: http://jsfiddle.net/Diezel23/pEwz2/19/ thanks again for those who tried to help – Gavin Wood Oct 25 '11 at 20:00