Quelle est la manière la plus simple de jQuery d'avoir une div "position: fixed" (toujours en haut)?

Question

Je suis relativement nouveau à jQuery, mais jusqu'à présent ce que j'ai vu me plait. Ce que je veux, c'est qu'un div (ou n'importe quel élément) soit 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 hacks CSS géants. Je préférerais que l'utilisation de jQuery (version 1.2.6) suffise, mais si j'ai besoin de jQuery-UI-core, alors c'est bien aussi.

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

Answer 1

En utilisant ce code HTML:

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

Ceci est le javascript que vous souhaitez utiliser. Il attache un événement au défilement de la fenêtre et déplace l'élément aussi loin que vous avez défilé.

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

---

Comme indiqué dans les commentaires ci-dessous, il est recommandé de ne pas joindre les événements à l'événement de défilement - que l'utilisateur fait défiler, il tire beaucoup, et peut causer des problèmes de performance. Envisagez de l'utiliser avec le plugin debounce/throttle de Ben Alman pour réduire les frais généraux.

Answer 2

Magnifique! Votre solution était 99% ... au lieu de "this.scrollY", j'ai utilisé "$ (window) .scrollTop()". Ce qui est encore mieux, c'est que cette solution nécessite uniquement 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 parce 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 3

Dans un projet, mon client souhaite une boîte flottant dans un autre div, donc j'utiliser la propriété CSS margin-top plutôt que haut pour ma boîte flottant séjour dans son parent.

Answer 4

Pour les navigateurs qui supportent "position: fixed" vous pouvez simplement utiliser javascript (jQuery) pour changer la position à "fixed" lors du défilement. Ceci élimine la nervosité lors du défilement avec les solutions $ (window) .scroll (function()) listées ici.

Ben Nadel démontre dans son tutoriel: Creating A Sometimes-Fixed-Position Element With jQuery

Answer 5

Pour ceux qui cherchent encore une solution facile dans IE 6. Je créé un plugin qui gère la position IE 6: problème fixe et est très facile à utiliser: Je l'ai écrit dans une tentative d'imiter la simplicité de belatedpng, où les seuls changements nécessaires sont l'ajout du script et l'invocation.

Answer 6

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 les appels d'événements de défilement rapide), il est possible de gagner le même comportement en ajoutant un wrapper <div> et un couple de styles.J'ai remarqué le défilement beaucoup plus lisse (aucun élément en retard) quand je 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).