Ce code a pour but de rendre compatible le fameux position : fixed
sur Internet Explorer 6 à l'aide de la propriété expression()
propre à ce dernier. Cette propriété permet de recalculer dynamiquement le contenu de l'expression expression(...)
durant la manipulation de la page, en l'occurrence lors d'un évènement window.onscroll
, sans code Javascript additionnel.
Page page-position.html
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Rendre "position: fixed" compatible Microsoft Internet Explorer 6</title> <!-- Code CSS pour Firefox, Safari, Opera, Internet Explorer 7... --> <style type="text/css" media="screen"> #fixed { position: fixed; left: 0; top: 0; right: 0; width: 100%; padding: 10px; background: gray; } </style> <!-- Code CSS pour Internet Explorer 6 --> <!--[if lte IE 6]> <style type="text/css" media="screen"> #fixed { position: absolute; top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight); } </style> <![endif]--> </head> <body> <div id="fixed">DIV en position: fixed;</div> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> <p>Contenu du site internet ...</p> </body> </html>
UPDATE : Il est important de copier l'intégralité du code avec les balises commentaires propres à Internet Explorer, sinon le fix ne fonctionnera pas !