Sticky Navigation?

Rosenregen

Hallöchen meine Lieben!

Ich hab ein kleines Problem damit, das Menü so oben anzuheften, dass es mitscrollt, wenn man im Forum nach unten scrollt.
Ich habs mit Javascript versucht, allerdings will das nicht so recht funktionieren :/
Oben angepinnt bleibt es zwar, mitscrollen will es allerdings nicht haha

Momentan siehts in meiner header.tpl so aus:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:

<div class="menu"><smallfont>$usercp_or_register
         <a href="memberslist.php?sid=$session[hash]"><img src="{imagefolder}/top_members.gif" border=0 alt="Mitgliederliste"></a>
         <a href="team.php?sid=$session[hash]"><img src="{imagefolder}/top_team.gif" border=0 alt="Administratoren und Moderatoren"></a>
         <a href="search.php?sid=$session[hash]"><img src="{imagefolder}/top_search.gif" border=0 alt="Suche"></a>
         <a href="misc.php?action=faq&sid=$session[hash]"><img src="{imagefolder}/top_faq.gif" border=0 alt="H‰ufig gestellte Fragen"></a>
          $header_acp</font></div>


<style>
body {
	margin:0;
}

.menu {
    height: 30px;
    background-color: #D7D7D7;
    font-size: 16px;
    text-align: center;
    color: #000;
    padding-top: 5px;
    width: 100%;
}
</style>

<script language="JavaScript">
<!--
$(document).ready(function(){
    $(window).scroll(function(){
        var scrollTop = 30;
        if($(window).scrollTop() >= scrollTop){
            $('.menu').css({
                position : 'fixed',
                top : '0'
            });
        }
        if($(window).scrollTop() < scrollTop){
            $('.menu').removeAttr('style'); 
        }
    })
})
//-->
</script>

Bin jetzt nicht sicher warums nicht funktioniert :/

LG und Danke im Voraus!

derkleene

Ich hoffe ich habe Dich richtig verstanden.
Du brauchst dafür kein JS. Es reicht CSS vollkommen aus.
Wichtig bei der fixed Angabe ist auch, das man top und left verwendet oder halt right und bottom.

Ich habe das nun mal ganz oben gesetzt. mit left und top 0px.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

<div class="menu"><smallfont>$usercp_or_register
         <a href="memberslist.php?sid=$session[hash]"><img src="{imagefolder}/top_members.gif" border=0 alt="Mitgliederliste"></a>
         <a href="team.php?sid=$session[hash]"><img src="{imagefolder}/top_team.gif" border=0 alt="Administratoren und Moderatoren"></a>
         <a href="search.php?sid=$session[hash]"><img src="{imagefolder}/top_search.gif" border=0 alt="Suche"></a>
         <a href="misc.php?action=faq&sid=$session[hash]"><img src="{imagefolder}/top_faq.gif" border=0 alt="H‰ufig gestellte Fragen"></a>
          $header_acp</font></div>


<style>
.menu {
    height: 30px;
    background-color: #D7D7D7;
    font-size: 16px;
    text-align: center;
    color: #000;
    padding-top: 5px;
    width: 100%;
    position: fixed;
	top: 0;
	left: 0;
}
</style>

Pigsel

Zitat:

Original von Rosenregen
Oben angepinnt bleibt es zwar, mitscrollen will es allerdings nicht haha

Bin jetzt nicht sicher warums nicht funktioniert :/

LG und Danke im Voraus!

wie ich das sehe gehts um das scroll-Menü das mit der Position der Seite mitgeht

Forensoftware: Burning Board, entwickelt von WoltLab GmbH