2

My question is more complicated than I find posted here If element is over another element? I have fixed position DIV and a lot of full width <section> elements with classes .white and .yellow (every second). I need to detect whether DIV element is over .white or .yellow section when scrolling down.

<div style="position: fixed"> ... </div>

<section class="white"> ... </section>
<section class="yellow"> ... </section>
<section class="white"> ... </section>
<section class="yellow"> ... </section>

I want to add a class .whiteDIV to that DIV when it is over <section class="white"> and a class .yellowDIV when it is over <section class="yellow"> to have different styles on different backrounds.

Live demo can be find here: http://digitalmotion.lt/easymoney/. I need to change navigation colors when it is over different backgrounds.

How I do detect when that DIV is over .white or .yellow section? Do I need use .offset() function to get all my sections coordinates in array or is there another way to do this?

Community
  • 1
  • 1
Saulius Kirklys
  • 43
  • 4

1 Answers1

0

Setting an array of offsets once seems to make the most sense and far more efficient than having to get them during scroll events. If it is for your bouncing menu there aren't that many changes of background vertically in page sort out

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • While I am still a beginner in javascript, maybe you could give me some main structure of function to start with, because arrays and .each() (I think I will need that too) sounds too difficult for me at the moment. Thank you. – Saulius Kirklys Feb 28 '12 at 23:37
  • actually you already have some code that changes the menu item when page scrolls, you should be able to use the same thing to change backgrounds – charlietfl Feb 29 '12 at 00:18