NavBar wie bei DataFox

[Dane315]

Hallo ich hab da mal ne Frage an die Profis unter euch kennt jemand den Weg die Navbar von http://www.datafox.co/
so zu gestalten wie sie halt ist... also das grobe habe ich durch Bootstrap hingekriegt ^^ aber dieser endgeile effekt das sie von durchsichtig zu schwarz wechselt den hätte ich gerne auch... auserdem würde ich gerne den selben effekt mit einem bild über dieser tabelle haben (code unten) nur das da nicht schwarz über der tabelle ist sondern ein bild und wenn man über den div-tabellenbereich geht soll das bild verblassen und der inhalt untendrunter z.b. link klickbar sein... so also ich finde das ziemlich anspruchsvoll also mal sehen ob das schon jmd kennt ^^

so far Dane315

<div style=" height:150px; width:535px; font-size:12px; overflow-y:auto; overflow-x:hidden; border: 4px solid #EED5FF; padding:0px;">

<table width="100%" border="0" cellspacing="3" cellpadding="2" >
<tr bgcolor="#6945FA">
<td><b><span style="color:#FFFFFF">Besucher</span></b></td>
<td><b><span style="color:#FFFFFF">Browser</span></b></td>
<td><b><span style="color:#FFFFFF">%</span></b></td>
</tr>
<tr>
<td>15772</td>
<td>Mozilla Firefox</td>
<td>73%</td>
</tr>
<tr>
<td>4581</td>
<td>Internet Explorer 6</td>
<td>21.2%</td>
</tr>
<tr>
<td>442</td>
<td>Mozilla</td>
<td>2%</td>
</tr>
<tr>
<td>122</td>
<td>Opera</td>
<td>0.5%</td>
</tr>
<tr>
<td>100</td>
<td>Safari</td>
<td>0.4%</td>
</tr>
<tr>
<td>99</td>
<td>Netscape</td>
<td>0.4%</td>
</tr>
<tr>
<td>15772</td>
<td>Mozilla Firefox</td>
<td>73%</td>
</tr>
<tr>
<td>4581</td>
<td>Internet Explorer 6</td>
<td>21.2%</td>
</tr>
<tr>
<td>442</td>
<td>Mozilla</td>
<td>2%</td>
</tr>
<tr>
<td>122</td>
<td>Opera</td>
<td>0.5%</td>
</tr>
<tr>
<td>100</td>
<td>Safari</td>
<td>0.4%</td>
</tr>
<tr>
<td>99</td>
<td>Netscape</td>
<td>0.4%</td>
</tr>

</table>

</div>

 

[nookie]

Hallo ich hab da mal ne Frage an die Profis unter euch kennt jemand den Weg die Navbar von http://www.datafox.co/
so zu gestalten wie sie halt ist... also das grobe habe ich durch Bootstrap hingekriegt ^^ aber dieser endgeile effekt das sie von durchsichtig zu schwarz wechselt den hätte ich gerne auch..

Die Navigation ist so oder so fixed-to-top. Jetzt musst du nur noch mit jQuery die vertikale Position abfragen und deine Navbar etwas kleiner machen und ihr einen schwarzen Hintergrund geben.

Theoretisch könntest du auch einfach zwei Klassen in CSS definieren und zwischen den beiden Klassen wechseln (addClass / removeClass).

Schau dir mal die drei Links an, damit solltest du dein vorhaben umsetzen können.

http://api.jquery.com/scrolltop/
http://api.jquery.com/animate/
http://api.jquery.com/css/


Gleiches Prinzip gilt für dein Bild. Einfach ein Overlay erzeugen und es dann verblassen lassen.