bei der css position klebrige kleben hält

Ich Frage mich, warum position: sticky funktioniert für einige x-Achse-scrollen, aber sobald Sie einen Bildlauf über die anfängliche Breite des Bildschirms Breite, Ihrer 'sticky-div', nicht mehr haften bleibt.

In diesem Beispiel habe ich eine Links-Seite-bar, der klebt auf der linken Seite (beachten Sie bitte, dass ich nicht verwenden können position: fixed oder position: absolute, weil in meinem aktuellen Projekt sowohl der Links-div und dem rechten div brauchen, um einen Bildlauf nach oben und nach unten entlang der y-Achse, daher möchten wir nur auf der linken Seite-kleben)

gibt es eine zusätzliche CSS-parameter kann ich definieren, wie

left-sticky-distance=999999%

oder sowas?

einige test-code zur Veranschaulichung ist unten

    <html>


    <body>

    <div style='
    position:sticky;
    z-index:1;
    left:0;
    width:100px;
    height:200px;
    overflow: hidden;
    background-color:#ff0000;
    opacity:0.8;
    >

    </div>

      <div style='position:absolute; top:10;left:10; width:200; height:50px; background-color: blue'>B</div>
      <div style='position:absolute; top:10;left:110; width:200; height:50px; background-color: blue'>C</div>
      <div style='position:absolute; top:10;left:210; width:200; height:50px; background-color: blue'>D</div>
    </body>
    <html>
  • Könntest du bitte erstellen Sie eine Geige oder so ?
InformationsquelleAutor user1709076 | 2017-10-09
  1. 6

    Diese Frage: https://stackoverflow.com/a/45530506 Antworten das problem.

    Einmal die "sticky-div" erreicht den Rand des Bildschirms, ist es am Ende der viewport des übergeordneten Elements. Dies bewirkt, dass die sticky-element, um zu stoppen und bleiben am Ende des übergeordneten viewport. Dieser code pen bietet ein Beispiel: https://codepen.io/anon/pen/JOOBxg

    CSS:

    #parent{
      width: 1000px;
      height: 1000px;
      background-color: red;
}
#child{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: sticky;
      top: 0px;
      left: 0px;
}
body{  
      width: 3000px;
      height: 3000px;
}

    HTML:

    <html>
  <div id="parent">
    <div id="child">
    </div>
  </div>
</html>

    • Dies brachte mich aus dem Stau, Dank
    InformationsquelleAutor Anthony Bauer
Schreibe einen Kommentar