Position sticky funktioniert nicht

[hedoo]

Hallo in die Runde!
Auf der Seite http://mutterboden.hd-interdesign.de/ funktioniert in der Section "Soil up. wir verdoppeln deine Spende" die position "sticky" nicht. Und zwar soll die se Überschrift stehen bleiben, während die Projekte auf der rechten Seite scrollen. Bin für eure Tipps und Hinweise dankbar.
LG
Henning

 

[TPHeinz]

Moin,

.kreis{
display: table;
position: -webkit-sticky;
position: sticky;
top: 10%;
left:50%;
z-index: 999;
width: 160px;
height: 160px;
background: #728673;
text-align: center;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
transform: rotate(30deg);
backface-visibility: hidden;
}
.kreis p{
display: table-cell;
vertical-align: middle;
color: #FAF6ED;
font-size: 18px;
line-height: 24px;
}

und ohne weitere divs gleich nach deinem body tag

<div class="kreis">
<p>Wir<br />verdoppeln<br />deine<br />Spende!</p>
</div>


https://www.w3schools.com/Css/css_positioning.asp

 

[hedoo]

Danke für den Tipp!

 

[Myhar]

Man kann das CSS auch generell aufräumen und kürzen:
Der kreis braucht doch kein display: table. Auch sind die prefix für die von dir verwendeten Eigenschaften nicht nötig, die werden von allen browsern unterstützt.
Falls display: table nur verwendet wurde um den Text zu zentrieren: (display table-cell beim p tag wird auch nicht benötigt)

.kreis {
....
display: grid;
place-content: center;
}

backface-visibility wird doch auch nicht benötigt?

 

[hedoo]

Danke, mit dem gridsystem habe ich mich noch nicht beschäftigt. Werde ich mir mal genauer anschauen.

 

[JuePoe]

position: sticky (CSS) funktioniert nur mit Elementen, die nicht innerhalb anderer Elemente stehen.
KORREKTUR: Stimmt so nicht. Hier ein funktionierendes Beispiel (die Navi links)
Lg