Comment faire partiellement défiler une image, puis rester fixe, puis faire défiler quand vous passez une section?

Question

Je ne sais même pas ce que je veux faire serait appelé

S'il vous plaît jeter un coup d'œil sur cette page:

http://www.philsalesses.com/plasma-pong/

Vous verrez le titre Plasma Pong et une image sous il, sur le côté gauche. Quand je fais défiler l'article, je voudrais qu'il reste pendant que la page défile. Cependant, vous remarquerez quand vous obtenez le bas de la page, il y a un pied de page et il n'y aurait pas assez de place pour le titre et l'image si je le rendais complètement statique. Je voudrais que cela reste jusqu'à ce que le pied de page frappe, puis faites défiler. Lorsque vous faites défiler la page vers le haut, il défile un peu, jusqu'à ce qu'il y ait de la place, puis restez sur place. Le même effet, mais à l'envers. Toute idée de quoi chercher comment je pourrais faire ça?

Answer 1

Définissez la position css des titres sur fixe. Ensuite, utilisez javascript pour détecter un événement de défilement lorsque certains critères sont remplis, réinitialisez-le à une position absolue afin qu'il reste au-dessus du pied de page. Ensuite, lorsque vous supprimez le positionnement absolu lorsque la page est défilée à partir du pied de page. Pour voir un exemple de travail allez à quirksmode.org. Dans ses articles, il a l'effet que vous recherchez.