en utilisant un simple script jquery pour avoir un div suivre la page sur le rouleau

Question

J'essaie d'utiliser ce script ici: http://css-tricks.com/scrollfollow-sidebar/ pour faire un div simple qui suit la fenêtre que l'utilisateur fait défiler. Je l'ai changé de 0 à topPadding et ai changé topPadding à topPadding * 2 pour obtenir le bon décalage supérieur.

Malheureusement, cela a l'effet secondaire de l'objet qui rend la page un peu plus longue et permet à l'utilisateur de faire défiler l'infini. Ce bogue se trouve également dans le code d'origine sans mes modifications de plus grande taille si vous réduisez la taille de la fenêtre.

J'ai aussi essayé un autre plugin pour jquery, mais cela n'a pas fonctionné du tout et cela me donne ce dont j'ai besoin, alors comment puis-je le réparer?

Answer 1

J'ai corrigé cette modification rapide, qui limite en fonction de la hauteur du document. Je ne suis pas certain que jQuery donne une hauteur précise, d'où une barrière de sécurité de 100px. Même si la hauteur n'est pas parfaite, tout défilement supplémentaire sera limité et certainement pas infini.

<script type="text/javascript"> 
    var documentHeight = 0; 
    var topPadding = 15; 
    $(function() { 
     var offset = $("#sidebar").offset(); 
     documentHeight = $(document).height(); 
     $(window).scroll(function() { 
      var sideBarHeight = $("#sidebar").height(); 
      if ($(window).scrollTop() > offset.top) { 
       var newPosition = ($(window).scrollTop() - offset.top) + topPadding; 
       var maxPosition = documentHeight - (sideBarHeight + 100); 
       if (newPosition > maxPosition) { 
        newPosition = maxPosition; 
       } 
       $("#sidebar").stop().animate({ 
        marginTop: newPosition 
       }); 
      } else { 
       $("#sidebar").stop().animate({ 
        marginTop: 0 
       }); 
      }; 
     }); 
    }); 
</script> 

Answer 2

Je peux dupliquer votre bug dans mon navigateur (Firefox 3.5).

Le problème est que le code ne cherche pas à voir si le bas de la barre latérale tombe à la fin du document.

Votre meilleur pari est d'utiliser la méthode .height() pour vérifier. Vous pouvez obtenir la hauteur de la barre latérale (comme présenté dans l'exemple) comme $("#sidebar").height(), et la hauteur du document entier comme $(document).height().

Quel devrait être exactement le comportement - à vous de choisir. Cela implique un if supplémentaire, pour s'assurer que tous vos pixels sont bien alignés, mais les questions de conception, comme la façon dont la barre latérale doit s'aligner sur le fond, vont être une question de goût personnel.

Answer 3

Pourquoi ne pas utiliser simplement CSS?

#theNonMovingDiv {position:absolute; position: fixed; top: Npx; right:Mpx} 

position: fixe; ne fonctionne pas en IE6, mais en incluant la position: absolue; vous donnera une approximation approximative.