PDA

View Full Version : change css style when a position of the page is reached



salaterella
08-11-2009, 12:46 PM
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
08-12-2009, 09:12 AM
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
08-13-2009, 02:26 PM
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
08-13-2009, 05:19 PM
continue here (http://www.dynamicdrive.com/forums/showthread.php?t=47612)