Quel est le moyen le plus simple pour jQuery d’avoir un div 'position: fixed' (toujours au sommet)?

Question

Je suis relativement nouveau à jQuery, mais pour l'instant ce que j'ai vu j'aime. Ce que je veux, c'est un div (ou de n'importe quel élément) pour être dans le haut de la page, comme si la "position: fixed" travaillé dans chaque navigateur.

Je ne veux pas quelque chose de compliqué. Je ne veux pas de géant hacks CSS. Je préfère, si juste en utilisant jQuery (version 1.2.6) est assez bonne, mais si j'ai besoin de jQuery-UI-core, alors que c'est bien trop.

J'ai essayé $("#topBar").scrollFollow(); <-- mais qui va lentement... je veux quelque chose à apparaître vraiment fixe.

Answer 1

En utilisant ce code HTML:

<div id="myElement" style="position: absolute">This stays at the top</div>

C'est le code javascript que vous souhaitez utiliser. Il attache un événement de la fenêtre de défilement et déplace l'élément vers le bas aussi loin que vous avez fait défiler.

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

---

Comme l'a souligné dans les commentaires ci-dessous, il est recommandé de ne pas associer des événements à l'événement scroll - que l'utilisateur fait défiler, il tire BEAUCOUP, et peut causer des problèmes de performance. Envisager de l'utiliser avec Ben Alman de l' anti-rebond/gaz plugin afin de réduire les frais.

Answer 2

Pour les navigateurs qui prennent en charge "position: fixed", vous pouvez simplement utiliser javascript (jQuery) pour changer la position en "fixed" lors du défilement. Ceci élimine la rapidité lors du défilement avec les solutions $ (fenêtre) .scroll (function ()) répertoriées ici.

Ben Nadel en fait la démonstration dans son tutoriel: Créer un élément à position parfois fixe avec jQuery

Answer 3

Magnifique! Votre solution était de 99% ... au lieu de "this.scrollY", j'ai utilisé "$ (window) .scrollTop ()". Mieux encore, cette solution ne nécessite que la bibliothèque jQuery1.2.6 (aucune bibliothèque supplémentaire n'est nécessaire).

La raison pour laquelle je voulais cette version en particulier est que c'est ce qui est actuellement livré avec MVC.

Voici le code:

 $(document).ready(function() {
    $("#topBar").css("position", "absolute");
});

$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});
 

Answer 4

HTML/CSS Approche

Si vous êtes à la recherche d'une option qui ne nécessite pas beaucoup de JavaScript (et et tous les problèmes qui vont avec, comme la rapidité de défilement des événements d'appels), il est possible d'obtenir le même comportement en ajoutant un wrapper <div> et un couple de styles. J'ai remarqué que beaucoup plus lisse de défilement (pas d'éléments à la traîne) lorsque j'ai utilisé la méthode suivante:

JS Fiddle

HTML

<div id="wrapper">
  <div id="fixed">
    [Fixed Content]
  </div><!-- /fixed -->
  <div id="scroller">
    [Scrolling Content]
  </div><!-- /scroller -->
</div><!-- /wrapper -->

CSS

#wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }

JS

//Compensate for the scrollbar (otherwise #fixed will be positioned over it).
$(function() {
  //Determine the difference in widths between
  //the wrapper and the scroller. This value is
  //the width of the scroll bar (if any).
  var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth;

  //Set the right offset
  $('#fixed').css('right', offset + 'px');​
});

Bien sûr, cette approche pourrait être modifié pour le défilement des régions qui gagnent/perdent le contenu au cours de l'exécution (ce qui aurait pour résultat de l'ajout et de la suppression des barres de défilement).

Answer 5

Pour ceux qui recherchent toujours une solution facile dans IE 6. J'ai créé un plugin qui gère la position d'IE 6: problème résolu et très facile à utiliser: http://www.fixedie.com/

Je l'ai écrit dans le but de reproduire la simplicité de tardive, où les seuls changements nécessaires sont l'ajout du script et son invocation.