Épingler les éléments où et quand ils apparaissent à l'écran

Question

Comment épingler des éléments à l'endroit où ils apparaissent lorsqu'ils apparaissent pour la première fois à l'écran?

J'ai quelques éléments dont la position est définie sur absolu. Après avoir rencontré l'objet pour la première fois, j'aimerais qu'il se fixe à cette position lorsque vous continuez à défiler sur l'écran.

(c.-à-point dans le coin inférieur gauche de l'écran et que vous souhaitez le garder épinglé là quand le défilement après que l'élément est rencontré)

Je me sers ScrollMagic, mais quand les articles sont épinglés ils sont décalés au milieu.

EDIT quelque chose en utilisant Figured jQuery

Answer 1

Pour un mouvement d'élément avec votre écran dans une position fixe, vous pouvez à ce qui suit:

yourElement{ 
    position: fixed; 
    top: 300px; 
    left: 400px; 
} 

Hope this helps!

Answer 2

Vous devez travailler avec des couches, jetez un oeil:

.layer1{ 
 
    position: fixed; 
 
    z-index: 1000; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    background-color: red; 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 
.layer2{ 
 
    height: 1000px; 
 
}

<div class="layer1"></div> 
 
<div class="layer2"> 
 
Normal content 
 
</div>