Zmiana wyglądu nieruchomego menu podczas przesuwania paska

0

Witajcie
Jestem tu nowa i jestem zdecydowanie żółtodziobem jeśli chodzi o programowanie, więc od razu proszę o wybaczenie głupich pytań i ignorancji :) Przyszło mi przerobić kod i mam z tym trochę problemów. Po prawej stronie mam nieruchome menu zablokowane za pomocą fixed i wszystko byłoby fajnie tylko chcę żeby zablokowany obiekt zmieniał swój wygląd w zależności od położenia na stronie. Przykładowo: jesli na początku znajduje się kategoria sport to w menu ma być kolorowe słowo sport, później muzyka, to muzyka ma się zrobić kolorowa a sport ma stracić kolor. Menu jest zadeklarowane jako tabela z obrazkami

Żeby było łatwiej sobie to wyobrazić z punktu widzenia użytkownika strona wygląda tak: http://www.heartmadestudio.eu/oferta.php
Wcześniej menu po prawej było w ogóle nieruchome.

I kod:

    <a name="fotografia_slubna"></a>  //pierwsza podkategoria menu
A bla bla bla tekst  i obrazek
     </td>                                            
     </tr>
     </table>
    </td>
    <td valign="top" style="padding-top:30px;position:fixed">   //tu zaczyna się wygląd graficzny pierwszego menu
    
    <table width="204" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td style="background-image:url(images/right_menu_green_tall.png); width:204px; height:71px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#fotografia_slubna"><img src="images/title_fotografia_slubna.png" border="0"></a></td>
    </tr>      
    <tr>
    <td style="background-image:url(images/right_menu_pink_tall.png); width:204px; height:73px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#sesje_rodzinne"><img src="images/title_sesje_rodzinne.png" border="0"></a></td>
    </tr>
    <tr>
    <td style="background-image:url(images/right_menu_pink_tall.png); width:204px; height:73px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#sesje_narzeczenskie"><img src="images/title_sesje_narzyczenskie.png" 
    .png" border="0"></a></td>
    </tr>
    <tr>
    <td style="background-image:url(images/right_menu_pink_tall.png); width:204px; height:73px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#sesje_portretowe"><img src="images/title_sesje_portretowe.png" border="0"></a></td>
    </tr>
    </table>  
    
    
    </td>   
  </tr>
  <
a name="sesje_rodzinne"></a>  //druga podkategoria menu
A bla bla bla tekst  i obrazek
     </td>                                            
     </tr>
     </table>
    <td valign="top" style="padding-top:30px;">   //tu zaczyna się wygląd graficzny drugiego menu 
    
    <table width="204" border="0" cellspacing="0" cellpadding="0">  
    <tr>
    <td style="background-image:url(images/right_menu_pink_tall.png); width:204px; height:73px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#fotografia_slubna"><img src="images/title_fotografia_slubna.png" border="0"></a></td>
    </tr>
    <tr>
    <td style="background-image:url(images/right_menu_green_tall.png); width:204px; height:71px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#sesje_rodzinne"><img src="images/title_sesje_rodzinne.png" border="0"></a></td>
    </tr>
    <tr>
    <td style="background-image:url(images/right_menu_pink_tall.png); width:204px; height:73px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#sesje_narzeczenskie"><img src="images/title_sesje_narzyczenskie.png" border="0"></a></td>
    </tr>
    <tr>
    <td style="background-image:url(images/right_menu_pink_tall.png); width:204px; height:73px; background-repeat:no-repeat; padding-top:13px;" valign="top" align="center"><a href="#sesje_portretowe"><img src="images/title_sesje_portretowe.png" border="0"></a></td>
    </tr> 
    </table>
     
    </td>
  </tr>

Trochę się już z tym męcze i szukałam wielu rozwiązań, więc będę bardzo wdzięczna za podpowiedź.

0

Jeśli dobrze zrozumiałem, chcesz aby podczas przewijania strony poszczególne elementy zmieniały swoje style (m.in. kolor).
Musisz poczytać na temat języka JavaScript, który umożliwia manipulację elementami widocznymi na stronie.

0

tak jak uzytkownik wyzej zapodal, a dokladniej uzyj biblioteki jquery(poczytaj jak ja dodac, moze byc z repozytorium google, wtedy masz tylko jedna linijke kodu) i cos takiego:

$(document).ready(function() {
   var t = $("#pierwszyBlok").offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        //tutaj zmien kolor menu
    }
});
});

itd itd

1 użytkowników online, w tym zalogowanych: 0, gości: 1