Sticky-Tag ändert nicht die Überschriften

Ich möchte eine sticky Überschriften machen. Eine Überschrift wird an einem CSS-Stick-Element festgehalten, wenn sie mit dem oberen Rand der Seite in Berührung kommt. Und wenn die andere Überschrift kommt, sollte sie die alte wegschieben und stattdessen stecken beide fest.Sticky-Tag ändert nicht die Überschriften

code

<h1>HEADING</h1><br /> 
<h2>Heading</h2> 
<p>text</p> 
<h2>Another heading</h2> 
<p>text</p>

h2 { 
    font-size: 40px; 
    text-align: center; 
    margin-top: 120px; 
    margin-bottom: 80px; 
    padding: 15px; 
    position: sticky; 
    top: -1px; 
}    
p { 
    text-align: center; 
    padding: 15px; 
    margin-bottom: 80px; 
    color: #262216; 
} 
h2,p { 
    display: flex; 
    min-width: 500px; 
    max-width: 1000px;  
    margin-left: auto; 
}

Quelle

2017-11-29 Václav Stummer

Ist Ihnen bekannt, dass "position: sticky" eine * experimentelle API * ist und noch nicht in der Produktion verwendet werden sollte? (Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky) Es ist nicht vollständig integriert und wird von allen Browsern unterstützt. (Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility für Browser-Kompatibilität und Unterstützung.) – UncaughtTypeError

Okey als, gibt es eine andere Option ohne js, um es so zu machen? –

Keine Möglichkeit, das gleiche beabsichtigte Verhalten ohne Javascript zu erreichen. – UncaughtTypeError

Wenn Sie der erste Header wollen aus dem Fenster durch den zweiten Kopf gedrückt werden, setzen Sie den Header und den Inhalt, nachdem es in einem separaten Behälter zum nächsten Kopf nach oben . sticky funktioniert nur in Behältern, die auf dem Bildschirm sichtbar sind, sobald der Behälter nicht mehr sichtbar ist, ist der h2 nicht mehr klebrig. In diesem Beispiel habe ich einen section für einen Container verwendet.

Beachten Sie, dass der große untere Rand auf dem p macht, was passiert, schwierig zu folgen, aber wenn Sie das zu bottom padding ändern, wird es den Effekt viel klarer machen.

h2 { 
 
    font-size: 40px; 
 
    text-align: center; 
 
    margin-top: 120px; 
 
    margin-bottom: 80px; 
 
    padding: 15px; 
 
    position: sticky; 
 
    top: -1px; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    padding: 15px; 
 
    margin-bottom: 80px; 
 
    color: #262216; 
 
} 
 

 
h2, 
 
p { 
 
    display: flex; 
 
    min-width: 500px; 
 
    max-width: 1000px; 
 
    margin-left: auto; 
 
    margin-right: auto;

<h1>HEADING</h1> 
 
<section> 
 
    <h2>Heading</h2> 
 
    <p>text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text <br/> 
 
    text </p> 
 
</section> 
 
<section> 
 
    <h2>Another heading</h2> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
</section>

Auch dann, wenn sticky derzeit nicht in IE funktionieren, wenn Sie also IE unterstützen müssen, können Sie eine andere Lösung finden müssen, werden, wie die Kommentare sagen.

Quelle

2017-11-29 10:26:24

Sticky-Tag ändert nicht die Überschriften

Antwort

Verwandte Themen