Sticky-Position funktioniert nicht auf Div-Element

Ich versuche, ein div Sticky relativ zum Ansichtsfenster positioniert, so dass es an der Spitze bleibt, wenn es aus der Sicht gescrollt wird, aber es funktioniert nicht.Sticky-Position funktioniert nicht auf Div-Element

#navigation { 
 
    display: flex; 
 
    background-color: #AA1111; 
 
    width: 100%; 
 
    height: 50px; 
 
    z-index: 10; 
 
    position: sticky; 
 
    position: -webkit-sticky; 
 
    top: 0; 
 
} 
 

 
header { 
 
    height: auto; 
 
    display: flex; 
 
}

<body> 
 
    <div class="page"> 
 
    <header> 
 
     <div id="navigation"> 
 
     </div> 
 
    </header> 
 
    </div> 
 
</body>

Quelle

2017-11-19 opportunityr

Alternativen? @VXp – opportunityr

https://caniuse.com/#search=sticky – kiranvj

Sticky wird an die Spitze halten, während das Mutterelement noch sichtbar ist. Nachdem das gesagt wurde, enthält Ihr Eltern-Element (Header) nur das sticky-Element und wird daher wie die Navigation normalerweise aus der Ansicht herausscrollen. Wenn Sie innerhalb der Kopfzeile ein anderes Element mit einer bestimmten Höhe hätten, würde die Navigation an der Spitze bleiben, bis auch diese nicht sichtbar ist.

https://jsfiddle.net/1zbnr2ho/

Wie andere gesagt haben, klebrig hat keine große Browser-Unterstützung, und vielleicht, was Sie suchen konnte nur mit Position erreicht werden: fixed?

#navigation { 
 
    display: flex; 
 
    background-color: #AA1111; 
 
    width: 100%; 
 
    height: 50px; 
 
    z-index: 10; 
 
    position: sticky; 
 
    position: -webkit-sticky; 
 
    top: 0; 
 
} 
 

 

 
body { 
 
    min-height: 5000px; 
 
} 
 

 
.other { 
 
    height: 500px; 
 
    background: blue; 
 
}

<div class="page"> 
 
    <header> 
 
    <div id="navigation"></div> 
 
    <div class="other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
 
    </header> 
 
</div>

Quelle

2017-11-19 18:03:25 jas7457

Upvoting, weil ich im Begriff war, die gleiche Lösung zu posten, aber Sie könnten erwähnen, dass 'Position: sticky' sollte nach' Position kommen: -webkit-sticky' (oder Jede Eigenschaft ohne Präfix sollte immer nach den vorangestellten Werten zuletzt kommen. –

Leider brauche ich den Effekt, der 'sticky' bietet, weil ich nicht will, dass er immer oben im Viewport bleibt. Ich werde wahrscheinlich nur JavaScript verwenden, um zu erkennen, wenn es aus der Sicht verschoben wird und eine feste Positionierung darauf anwendet. Vielen Dank! – opportunityr

@MrLister macht einen guten Punkt, sollten Sie zuerst Ihren Anbieter Präfix-Version, und Ihre echte Version zweiten. Dies kann einen Unterschied machen. – jas7457

Sticky-Position funktioniert nicht auf Div-Element

Antwort

Verwandte Themen