quand la position css collante arrête de coller

Je me demandais pourquoi position: sticky fonctionne pour un défilement de l'axe des x, mais une fois que vous faites défiler la largeur initiale de la largeur de l'écran, votre 'div collant' arrête de coller.quand la position css collante arrête de coller

Dans cet exemple, j'ai une gauche barre latérale qui colle à la gauche (s'il vous plaît noter que je ne peux pas utiliser position: fixed ou position: absolute, parce que dans mon projet réel à la fois la gauche div et le besoin droit div pour faire défiler et le long de l'axe des y, donc nous ne voulons gauche côté-collage)

est-il un paramètre CSS supplémentaire je peux définir, comme

left-sticky-distance=999999%

ou quelque chose comme ça?

du code ci-dessous est essai illustrant

<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>

Source

2017-10-09 user1709076

Pourriez-vous s'il vous plaît créer un violon ou quelque chose? –

Cette question: https://stackoverflow.com/a/45530506 répond au problème.

Une fois que le "collant div" atteint le bord de l'écran, il est à la fin de la fenêtre de l'élément parent. Cela provoque l'arrêt de l'élément collant et reste à la fin de la fenêtre d'affichage des parents. Ce stylo code donne un exemple: https://codepen.io/anon/pen/JOOBxg

#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> 
 
    <div id="parent"> 
 
    <div id="child"> 
 
    </div> 
 
    </div> 
 
</html>

Source

2017-11-17 14:23:55

quand la position css collante arrête de coller

Répondre

Questions connexes