change css style when a position of the page is reached

[salaterella]

Hello,
I have to tell you immediately that I´m very new to javascript (and so also in the forum) but I have an idea and I don´t even know where to start. It´s a bit difficult to explain but I´ll try my best - sorry for mistakes.

I have a normal 1 2 3 4 5 6 anchor navigation that make the page jump up and down when clicked. When you click 1, this becomes underlined and when you click 2, 1 goes back to not underlined and 2 become underlined... and so on. I would like to add the feature that when you scroll the page and the anchor 2 reaches the top (without clicking the buttons but only with scrolling) the button 2 becomes underlined like if it would have been clicked ... and so on with all buttons...

Is it possible?

Any help is very appreciated, links to tutorials or the definition of what I´m searching for also very very much.

Thanks in advance,
salta

[salaterella]

Hi, I figured a couple of things out by my own.
And the buttons are now working onClick this way:

html

<span id='first' class="selected"><a href="#1" onclick="first()">1 </a></span>
<span id='secondo' class="normal"> <a href="#2" onclick="second()">2 </a></span>

and so on for 3 4 5 6

the "second()" function in javascript

function second() {
	document.getElementById("first").setAttribute("class" , "normal");
	document.getElementById("second").setAttribute("class" , "selected");
}

And this works good. I thought about checking the y position of the window with window.onscroll and call the same functions but it doesn´t work. The problem is that the pictures are in an absolute positioned DIV with overflow-y:auto. So when you scroll you don´t actually scroll the window but the DIV.
Is there a way to control in javascript the scroll of a DIV?
Or is there anything else I should change?

Please help!

[salaterella]

UPDATE

I managed to call a javascript function onScroll of the div this way:

<div id="right" onScroll="message()">
.....
</div>


and if I do

function message() {
alert("hello');
}

It works!!

Now I´m trying to capture the y position of the DIV and call a function when higher than 100.


var div = document.getElementById("right");

function message() {
if(div.pageYOffset<=100) {
second();
}
}


But it doesn´t work!

Please help! i´m almost there!

}

[salaterella]

continue here