position: sticky;

[Forumsgast]

Hallo,
ich versuche gerade verzweifelt, dass ein Menu, welches (im Startscreen) am unteren Bildschirmrand ist mitgezogen wird, sobald der obere Bildschirmrand am Menu angelangt ist (durch scrollen).

Im Internet stand, dass es einfach zu machen währe indem man diesen tag setzt.

position: sticky; 

Leider funktioniert dies nicht. Ich habe auf einer Webseite gelesen, dass dieses Tag nicht bei allen Browsern funktioniert. Es gibt aber genügend Webseiten, wo es bei mir klappt (mit einigen Browsern). Vielleicht kann mir ja einer von euch sagen, was genau ich dafür anders machen muss.

Achtung: Ich meine damit nicht

position: fixed; 

,dann würde es nämlich unten am Bildschirmrand kleben bleiben und nicht oben.

Hoffe jemand kann mir helfen.
Mit freundliche Grüßen,
DerKeksKlauer

[Forumsgast]

„funktioniert nicht“ ist keine brauchbare Fehlerbeschreibung. Liefere bitte auch Beispielcode, bei dem das Fehlverhalten auftritt.

[Forumsgast]

    menu {
        position: sticky;
        left: 2%;
        right: 2%;
        bottom: 0%;

        height: 5%;
        margin: 0;
        background-color: black;
        opacity: 0.9;
        line-height: 0;
    } 

[Forumsgast]

Wir sollten das reproduzieren können. Mit dem Codeschnipsel ist das nicht möglich.

Mach doch ein fiddle oder codepen oder so was.

[Forumsgast]

HTML:

<menu>
                <span id="title"><h1>Smile Corp. |</h1></span>
                <span id="menu">
                    <p>
                        <a href="casino.php">Casino</a> <a href="kontakt.php">Kontakt</a>
                    </p>
                </span>
            </menu>

css:

    menu {
        position: fixed;
        left: 2%;
        right: 2%;
        top: 0%;

        height: 5%;
        margin: 0;
        background-color: black;
        opacity: 0.9;
        line-height: 0;
    }

   #title {
        position: absolute;
        left: 1%;
        right: 85%;
        color: white;
    }

    #menu {
        position: absolute;
        left: 15%;
        right: 0%;
        top: 0%;
        bottom: 0%;
        line-height: 50%;
    }

    #menu a {
        color: white;
        text-decoration: none;
        font-size: 1.25em;
        margin-right: 1em;
    } 

Ich denke, dass mehr Code gar keine Rolle spielt. Mehr darf/kann ich auch gar nicht weitergeben.

Mit freundlichen Grüßen,

Ps. Ich weiß, dass der HTML Code auch besser ging. Es hat aber seine Gründe warum ich das so gemacht habe.

[Forumsgast]

Ich denke, dass mehr Code gar keine Rolle spielt. Mehr darf/kann ich auch gar nicht weitergeben.

Brauchst du auch nicht - es würde reichen wenn du ein vollständiges Beispiel verlinken(!) würdest anhand dessen man das Problem nachvollziehen kann. Was jetzt eigentlich das Problem ist hast du übrigens auch noch nicht verraten …

Ps. Ich weiß, dass der HTML Code auch besser ging. Es hat aber seine Gründe warum ich das so gemacht habe.

Auf die Gründe warum du invaliden Code produzierst bin ich aber gespannt. span darf als inline-Element keine block-level-Elemente (wie p und h1) enthalten.

Zu CSS-Code: wo ist jetzt das "position:sticky"? Und mit dem "position:absolute" nimmst du die Elemente komplett aus dem Fluss heraus, #title steht dann nicht mehr innerhalb von menu.

[Forumsgast]

menu {
position: sticky;
left: 2%;
right: 2%;
bottom: 0%;

height: 5%;
margin: 0;
background-color: black;
opacity: 0.9;
line-height: 0;
} 

Wir sollten das reproduzieren können. Mit dem Codeschnipsel ist das nicht möglich.

...

Das ist schon möglich - anders gesagt: Der Codeschnipsel ist nicht das Problem, das ist einfach CSS, und es werden die Positions-Eigenschaften des menu-Tags festgelegt. Unklar ist vielmehr die Beschreibung, wie das alles aussehen und sich verhalten soll.

Ich muß mich da erstmal ein bischen wieder in diese Materie einarbeiten - es ist ein bischen tricky, aber es geht. Beziehe bitte in deine Beschreibung sämtliche Elemente mit ein und ordne sie "Blöcken" zu, die du so bildest, daß die Elemente eines Blocks beim Scrollen eine Einheit bilden, die untereinander ihre relativen Positionen nicht verändern und/oder transparent übereinanderliegen. Nummeriere sie (das sollten nicht mehr als allerhöchstens 4 sein). Dann beschreibe es entsprechen, z.B. "beim Laden liegen 1 und 2 bündig am oberen Rand übereinander, 3 schließt sich unten an. Beim Scrollen schiebt sich 2 unter 1 hinweg..." usw.

Du kannst das auch ganz anders beschreiben, aber man muß erkennen, in welcher Reihenfolge die übereinanderliegen und wie sich die einzelnen - wie Spielkarten oder so - übereinander schieben.

In der Zeit, wo du diese Beschreibung erstellst, werde ich dann mal versuchen, die Sites, die ich dazu gemacht habe, wieder auszugraben.

[Forumsgast]

HTML:

<menu>
<span id="title"><h1>Smile Corp. |</h1></span>
<span id="menu">
<p>
<a href="casino.php">Casino</a> <a href="kontakt.php">Kontakt</a>
</p>
</span>
</menu>

css:

menu {
position: fixed;
left: 2%;
right: 2%;
top: 0%;

height: 5%;
margin: 0;
background-color: black;
opacity: 0.9;
line-height: 0;
}

#title {
position: absolute;
left: 1%;
right: 85%;
color: white;
}

#menu {
position: absolute;
left: 15%;
right: 0%;
top: 0%;
bottom: 0%;
line-height: 50%;
}

#menu a {
color: white;
text-decoration: none;
font-size: 1.25em;
margin-right: 1em;
} 

Ich denke, dass mehr Code gar keine Rolle spielt. Mehr darf/kann ich auch gar nicht weitergeben.

Mit freundlichen Grüßen,

Ps. Ich weiß, dass der HTML Code auch besser ging. Es hat aber seine Gründe warum ich das so gemacht habe.

Da ist auf jeden Fall schon ein Fehler drin: Das "menu" taucht als html-Element und dann noch mal als id auf. Das bringt Chaos ins CSS. Verwende bitte CSS-Klassen.

[Forumsgast]

... hi, versuchs mal damit

Ich würde Dir raten, statt opacity lieber das hier zu nehmen, background: rgba(0,0,0,0.9);

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 2%;
    right: 2%;

    height: 5%;
    margin: 0;
    background: rgba(0,0,0,0.9);
    padding: 50px;
    font-size: 20px;
    line-height: 0;    
}

h1 {color: white;}
</style>
</head>
<body style="margin: 0;">

</p>
<div class="sticky">
    <span id="title"><h1>Smile Corp. |</h1></span>
    <span id="menu">
        <p>
            <a href="casino.php">Casino</a> <a href="kontakt.php">Kontakt</a>
        </p>
    </span>
</div>

<div style="height: 3000px;"></div>

</body>
</html>

[Forumsgast]

Hallo,
danke für den Tipp mit der Transparenz. Wie man es zu einem richtigen Sticky Element macht habe ich gerade auch herausgefunden.

position: -webkit-sticky;
position: sticky;
top: 0; 

Aber trotzdem danke, dass du dich dem Problem angenommen hast. Für alle anderen gilt das ebenso, es währe aber nicht viel mehr Code nötig gewesen, als dass, was ich schon geschickt habe.

Mit freundlichen Grüßen,
einen schönen Abend noch.

[Forumsgast]

DerKeksKlauer
Validiere dein HTML, das Element Menu ist als veraltet eingestuft.

Samuel7
Warum soll er CSS-Klassen verwenden?
Man kann durchaus ein Begriff, der als Element definiert ist auch als ID und Klasse verwenden, ob das ratsam ist, ist eine andere Frage.

[Forumsgast]

DerKeksKlauer
Validiere dein HTML, das Element Menu ist als veraltet eingestuft.

Samuel7
Warum soll er CSS-Klassen verwenden?
Man kann durchaus ein Begriff, der als Element definiert ist auch als ID und Klasse verwenden, ob das ratsam ist, ist eine andere Frage.

"menu" ist deprecated, deshalb wird er das aktuelle einsetzen (nav?). Und da er das speziell formatiert, muß er eine Klasse oder id verwenden. Da menüs mehrfach vorkommen können, Klasse.

... ob das ratsam ist, ist eine andere Frage.

Eben, wir geben Ratschläge - muß man nicht befolgen. Ist aber ratsam...