Faire Fixe flottant élément de défilement en douceur dans Firefox et Chrome

J'ai un script qui utilise jQuery et CSS pour positionner quelque chose en haut de la page lorsqu'elle défile. Cependant, le bar ressemble à trembler lorsque vous faites défiler et il a été résolu en haut du navigateur Google Chrome et Mozilla Firefox. Pourquoi pourrait-il être?

J'espère que vous pouvez comprendre ce que je suis en train de décrire. Si pas, copiez et collez ce code avec une bibliothèque jQuery pour voir ce que je veux dire:

<style type='text/css'>
body {
    height:1000px;
    margin:0;
    padding:0;
}

#scroller {
    position:relative;
    top:60px;
    width:100%;
    background:#CCC;
    height:20px;
}
</style>

<script type='text/javascript'>
    $(window).load(function() {
        $(window).scroll(function() {
            if($(window).scrollTop()>60) {
              $('#scroller').css('top', $(window).scrollTop());
            }
        });
    });
</script>

<div id="scroller">Some controls</div>
Voici l'exemple mis en place: jsfiddle.net/nwellcome/6PGZE

OriginalL'auteur Cosmo Posmo | 2011-08-08

  1. 6

    Utiliser ceci:

    $(window).load(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>60){
            $('#scroller').css('position', 'fixed');
            $('#scroller').css('top', 0);
        } else {
            $('#scroller').css('position', 'relative');
            $('#scroller').css('top', 60);
        }
    });
});

    http://jsfiddle.net/nwellcome/6PGZE/1/

    Plutôt que de manipuler le top tout le temps, une fois qu'il est censé rester au top set "position" pour "fixe" et supérieur à 0, de cette façon, il n'a pas à attendre pour le javascript événement scroll à feu pour fixer la position.

    Julien, c'est la page taux de rafraîchissement qui provoque cela et cela diffère d'un navigateur à navigateur et le machine-to-machine. Le "fixe" technique permet de contourner ce en le rendant interne au navigateur et ne dépend pas de JavaScript. La bonne réponse.

    OriginalL'auteur nwellcome

  2. 3

    Il y a aussi un plugin jquery qui s'occupe de cela. Voici une démo d'un en-tête qui pousse une bannière vers le haut hors de vue, puis s'arrête en haut de la page. Pour votre exemple, supposons que la bannière n'est pas là.

    Démo: http://jsfiddle.net/ZczEt/

    Edit: mise à Jour de violon: http://jsfiddle.net/ZczEt/2180/

    Utilisation:

    $(document).ready(function() {
    $('.header').scrollToFixed();
});

    La description du plugin est comme suit:

    Ce plugin est utilisé pour fixer les éléments de la partie supérieure de la page, si l'élément aurait défilé de mode, à la verticale; cependant, il ne permet pas l'élément de continuer à se déplacer vers la gauche ou la droite avec la barre de défilement horizontale.

    Donné une option marginTop, l'élément va cesser de déplacement vertical vers le haut une fois que le défilement vertical a atteint la position cible; mais, l'élément va encore se déplacer à l'horizontale comme à la page défile de droite ou de gauche. Une fois que la page a été défile en arrière vers le passé de la position de la cible, l'élément sera restauré à sa position d'origine sur la page.

    Ce plugin a été testé dans Firefox, 3/4, Google Chrome 10 Et 11, Safari 5, et Internet Explorer 8/9.

    Plugin et source: https://github.com/bigspotteddog/ScrollToFixed

    OriginalL'auteur bigspotteddog