Est-ce possible sans utiliser javascript?

J'ai créé une interface utilisateur simple avec JSFiddle et je me demande si la même interface utilisateur peut être faite sans utiliser JavaScript .

A Fiddle dit plus de 1000 mots.

Donc, la question est (car il semble peu clair pour certaines personnes): Comment puis-je obtenir les mêmes résultats sans utiliser de JavaScript?

PS: Je ne souhaite pas utiliser JavaScript pour recalculer la position sur chaque événement de défilement car le repositionnement dans IE n'est pas suffisamment lisse.

HTML:

<div class="A"> <div class="B"> B </div> <div class="C"> This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent. </div> </div>

CSS:

 .A { background-color: yellow; height: 400px; width: 700px; overflow:scroll; position: relative; } .B { background-color: green; height: 1000px; width: 1500px; position: absolute; top:0; color:white; } .C { background-color: red; position: absolute; left: 100px; top: 0px; height: 1000px; width: 100px; }

JS (avec jQuery):

 $('.A').scroll(function(e) { $('.C').css('left', e.target.scrollLeft + 100); });

Lorsque de nombreux navigateurs le supportent, vous pourrez utiliser la nouvelle valeur de position sticky :

 .C { position: sticky; position: -webkit-sticky; left: 100px; top: auto; /* Default value */ }

http://jsfiddle.net/5z3nLqq5/12/

J'ai joué avec votre échantillon (css seulement) et l'ai mis dans un état où il était tout à fait juste, mais pas assez proche imo. Cependant, puisque vous dites que ce n'est pas assez courant dans IE, je souhaite vous suggérer ceci:

 var $cRef = $('.C'); $('.A').scroll(function(e) { $cRef.css('left', e.target.scrollLeft + 100); });

Le plus gros problème avec IE n'est pas que les calculs sont beaucoup plus lents, mais que les requises dom peuvent être très lentes selon la version. La mise en cache des éléments dom peut faire une grande différence.

PS: Oui, je sais que vous recherchez une solution NON-JS. Mais en accordant votre raisonnement, ce script pourrait résoudre votre problème, au lieu d'avoir aucune solution à la fin, car il pourrait être difficile d'obtenir une solution de navigateur croisé qui fonctionne sur toutes les plates-formes.

J'ai ajouté un autre conteneur au code HTML, comme ceci:

 <div class="container"> <div class="A"> <div class="B"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit... </div> </div> <div class="C"> This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent. </div> </div>

Ensuite, a ajouté du style à la classe conteneur

 .container { background-color: green; height: 400px; width: 700px; position: absolute; top:0; overflow-x:hidden; overflow-y:scroll; }

Et a apporté quelques modifications aux classes A et C. Je sais que ce n'est pas le résultat que nous voulons , mais c'est semblable à cela: voici le violon http://jsfiddle.net/gnfwg08c/

Semble travailler:

JsFiddle

Ajout d'un conteneur pour B qui était la largeur de A mais la hauteur de B Fonctionne si cela ne vous dérange pas la barre de défilement horizontale en bas de B (que vous pouvez cacher en utilisant webkit-scrollbar scrollbar : JsFiddle ): /