problème cosmétique lorsque l'on colle div à bas sur window.scroll

J'ai un problème esthétique plutôt ennuyeux avec jQuery. J'utilise l'événement $ (window) .scroll pour coller un div au bas de la fenêtre sauf quand il atteint le pied de page, auquel cas il reste juste au-dessus. Cela me donne essentiellement un effet similaire (juste l'inverse) à celui utilisé ici sur stackoverflow pour l'info-bulle "Comment formater" affichée lors de la pose d'une question.problème cosmétique lorsque l'on colle div à bas sur window.scroll

Le problème est que l'animation n'est pas « agréable »:

la div ressemble à ça « secouer » lorsque vous faites défiler la fenêtre.
Ce comportement est plus fort quand défilement vers le haut que vers le bas lors du défilement
Le comportement semble être pire avec Firefox qu'avec d'autres navigateurs
Cela ne se produit pas une fois que nous avons atteint le pied de page auquel cas les séjours div bien au-dessus.

Veuillez trouver ci-dessous l'intégralité du code que vous pouvez simplement copier/coller pour tester.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       function positionToolbar() { 
        var windowTop = $(window).scrollTop(); 
        var windowHeight = $(window).height(); 
        var toolbarHeight = $("#toolbar").height(); 
        var top = windowHeight + windowTop - toolbarHeight; 
        var footerTop = $("#footer").position().top; 
        if ((top + toolbarHeight) >= footerTop) { 
         $("#toolbar").css('top',footerTop - toolbarHeight); 
        } else { 
         $("#toolbar").css('top', windowHeight + windowTop - toolbarHeight); 
        } 
       } 
       positionToolbar(); 
       $(window).scroll(function() { 
        positionToolbar(); 
       }); 
      }); 
     </script> 

     <style type="text/css"> 
      body { margin: 0; padding: 0} 
      #toolbar { width: 100%; height: 50px; background-color: blue; position: absolute } 
      #whatever { height: 2000px; width: 100%; background-color: yellow} 
      #footer { width: 100%; height: 300px; background-color: red } 
     </style> 
    </head> 
    <body> 
     <div id="toolbar"></div> 
     <div id="whatever"></div> 
     <div id="footer"></div> 
    </body> 
</html>

Toute aide serait grandement appréciée. Merci.

Source

2010-07-02 Max

Quelle est la raison pour laquelle cela ne peut pas être du code CSS pur? Il éliminerait le saut et tel, ou sont des navigateurs plus anciens comme IE6 un souci? –

Pouvez-vous réaliser ce dont j'ai besoin avec CSS? Gardez à l'esprit qu'il ne s'agit pas seulement de coller la div au bas de la fenêtre. Il y a la situation où le pied de page est atteint (c'est-à-dire qui pénètre dans la fenêtre en défilant vers le bas) auquel cas le div doit rester à son sujet. – Max

Il est possible en donnant à 'body' une hauteur minimale de 100%, en spécifiant le pied de page à positionner absolument, et en ajoutant un padding inférieur à l'enveloppe de contexte ou au corps, en fonction de votre structure DOM. Les éléments positionnés comme absolus seront ancrés à leurs parents non statiques les plus proches. –

La solution consiste à utiliser le positionnement fixe/bas 0 par défaut. De cette façon, la position n'a pas besoin d'être mise à jour sur le défilement de la fenêtre et le problème cosmétique disparaît.

function positionToolbar() { 
    var windowTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 
    var toolbarHeight = $("#toolbar").height(); 
    var top = windowHeight + windowTop - toolbarHeight; 
    var footerTop = $("#footer").position().top; 
    if ((top + toolbarHeight) > footerTop) { 
     $("#toolbar").css('position','absolute').css('top',footerTop - toolbarHeight); 
    } else { 
     $("#toolbar").css('position','fixed').css('top','auto').css('bottom','0'); 
    } 
}

Source

2010-07-19 09:35:39 Max

problème cosmétique lorsque l'on colle div à bas sur window.scroll

Répondre

Questions connexes