web-dev-qa-db-fra.com

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

Je suis relativement nouveau sur jQuery, mais jusqu'à présent, j'aime ce que j'ai vu. Ce que je veux, c'est qu'un div (ou n'importe quel élément) apparaisse en haut de la page comme si "position: fixed" fonctionnait dans tous les navigateurs.

Je ne veux pas quelque chose de compliqué. Je ne veux pas de piratages CSS géants. Je préférerais si utiliser jQuery (version 1.2.6) suffit, mais si j’ai besoin de jQuery-UI-core, c’est bien aussi.

J'ai essayé $ ("# topBar"). ScrollFollow (); <- mais ça va lentement ... Je veux que quelque chose semble vraiment fixe.

jquerycsspositioning
35
Timothy Khouri

En utilisant ce HTML:

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

C'est le javascript que vous voulez utiliser. Il attache un événement au défilement de la fenêtre 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 indiqué dans les commentaires ci-dessous, il n'est pas recommandé d'attacher des événements à l'événement de défilement. En effet, lorsque l'utilisateur fait défiler l'écran, il déclenche BEAUCOUP et peut entraîner des problèmes de performances. Utilisez-le avec le plug-in debounce/throttle de Ben Alman pour réduire les frais généraux.

60
nickf

Pour les navigateurs prenant en charge "position: fixed", vous pouvez simplement utiliser javascript (jQuery) pour modifier la position en "fixed" lors du défilement. Cela é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éation d’un élément à position parfois fixe avec jQuery

7
Schmoove

Belle! 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 requise).

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");
});
6
Timothy Khouri

Approche HTML/CSS

Si vous recherchez une option ne nécessitant pas beaucoup de JavaScript (et tous les problèmes qui y sont associés, tels que les appels d'événement de défilement rapide), il est possible d'obtenir le même comportement en ajoutant un wrapper <div> et quelques styles. . J'ai remarqué un défilement beaucoup plus fluide (aucun élément à la traîne) lorsque j'ai utilisé l'approche 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ée pour les régions de défilement qui gagnent/perdent du contenu pendant l’exécution (ce qui entraînerait l’ajout/la suppression de barres de défilement).

2
Mac Attack

Pour ceux qui recherchent toujours une solution facile dans IE 6. J'ai créé un plug-in qui gère le problème IE 6: problème corrigé et très facile à utiliser: http: //www.fixedie. com/

Je l’ai écrit pour tenter d’imiter la simplicité de la tâche tardive, où les seuls changements nécessaires sont l’ajout du script et son invocation.

1
tbranyen

Dans un projet, mon client souhaite une boîte flottante dans une autre div. J'utilise donc la propriété CSS margin-top plutôt que top pour que ma boîte flottante reste dans son parent.

0
Tom