YourWBB


yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Sticky Navigation? » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag 4.901 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen

Zum Ende der Seite springen Sticky Navigation?
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Rosenregen Rosenregen ist weiblich
Mitglied


Dabei seit: 23.08.12
Beiträge: 9
Fähigkeiten: WBB3 Fortgeschritten; WBB Lite 1 Fortgeschritten
Forenversion: Lite 1.0

 Sticky Navigation? Antworten Zitieren Editieren Melden       UP

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!
22.02.14 14:09 Rosenregen ist offline E-Mail WWW Finden Als Freund hinzufügen
derkleene derkleene ist männlich
Alternativ Mitglied


Dabei seit: 28.08.06
Beiträge: 181
Fähigkeiten: WBB2 Fortgeschritten; WBB Lite 1 Profi
Herkunft: Niedersachsen
Forenversion: Lite 1.0

Antworten Zitieren Editieren Melden       UP

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>


__________________
---
Es grüßt
DerKleene
NeoTower
22.02.14 21:12 derkleene ist offline E-Mail WWW Finden Als Freund hinzufügen
Pigsel
Mitglied


images/avatars/avatar-5749.gif

Dabei seit: 05.09.11
Beiträge: 774
Fähigkeiten: WBB Lite 1 Fortgeschritten
Forenversion: Lite 1.0

 RE: Sticky Navigation? Antworten Zitieren Editieren Melden       UP

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

__________________
Ein Leben ohne CodeBug's ist ein Leben im Paradies

23.02.14 03:36 Pigsel ist offline E-Mail Finden Als Freund hinzufügen
Baumstruktur | Brettstruktur
Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Sticky Navigation?