CSS: position fixe sur l'axe des x mais pas des y?

Question

Y a-t-il un moyen de fixer une position sur l'axe x uniquement? Ainsi, lorsque l'utilisateur fait défiler vers le haut, la balise div fera défiler vers le haut avec lui, mais pas de côté?

Answer 1

C'est une technique simple utilisant également le script. Vous pouvez également vérifier une démo ici.

JQuery

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Pourquoi ce 15, car dans le CSS, nous avons défini left à 15, donc lorsque nous faisons défiler, nous voulons que cela reste à 15px à gauche
    });
});

CSS

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

---

Mise à jour Crédit: @PierredeLESPINAY

Comme commenté, pour que le script supporte les changements dans le CSS sans avoir à les recoder dans le script. Vous pouvez utiliser ce qui suit.

var leftOffset = parseInt($("#header").css('left')); // Prenez d'abord la position left
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset // Utilisez-la plus tard
    });
});

Démo :)

Answer 2

Non, ce n'est pas possible avec du CSS pur. Ce type de positionnement fixe l'élément dans le viewport. Je suggère simplement de fixer l'élément à l'un des côtés du viewport (c'est-à-dire en haut, en bas, à gauche ou à droite) afin qu'il n'interfère pas avec les autres contenus.

Answer 3

La solution de Starx m'a été extrêmement utile. Mais j'ai eu quelques problèmes lorsque j'ai essayé d'implémenter une barre latérale avec défilement vertical. Voici mon code initial, basé sur ce que Starx a écrit :

function fix_vertical_scroll(id) {
    $(window).scroll(function(){
        $(id).css({
            'top': $(this).scrollTop() //À utiliser plus tard
        });
    });
}

C'est légèrement différent de la solution de Starx, car je pense que son code est conçu pour permettre à un menu de flotter horizontalement au lieu de verticalement. Mais c'est juste une parenthèse. Le problème que j'avais avec le code ci-dessus est que dans de nombreux navigateurs, ou en fonction de la charge des ressources de l'ordinateur, les mouvements du menu étaient saccadés, alors que la solution css initiale était fluide. Je attribue cela au fait que les navigateurs sont plus lents à déclencher des événements javascript qu'à implémenter du css.

Ma solution alternative à ce problème de saccade est de définir le cadre en position fixe au lieu de absolue, puis d'annuler les mouvements horizontaux en utilisant la méthode de starx.

function float_horizontal_scroll(id) {
    jQuery(window).scroll(function(){
        jQuery(id).css({
            'left': 0 - jQuery(this).scrollLeft()
        });
    });
}

#leftframe {
 position:fixed;
 width: 200;
}   

Vous pourriez dire que tout ce que je fais, c'est échanger la saccade du défilement vertical contre celle du défilement horizontal. Mais le fait est que 99% du défilement est vertical, et c'est beaucoup plus ennuyeux quand c'est saccadé que quand le défilement horizontal l'est.

Voici mon article connexe sur ce sujet, si je n'ai pas déjà épuisé la patience de tout le monde : Fixer un menu dans une direction en jquery

Answer 4

Je viens d'ajouter position:absolute et cela a résolu mon problème.

Answer 5

Je réalise que ce fil de discussion est très ancien, mais il m'a aidé à trouver une solution pour mon projet.

Dans mon cas, j'avais un en-tête que je voulais avoir une largeur minimum de 1000px, toujours en haut, avec un contenu pouvant s'étendre indéfiniment vers la droite.

header{position:fixed; min-width:1024px;}

    $(window).on('scroll resize', function () {
        var header = $('header');
        if ($(this).width() < header.data('min-width')) {
            header.css('left', -$(this).scrollLeft());
        } else {
            header.css('left', '');
        }
    });

Cela devrait également fonctionner lorsque votre navigateur a une largeur inférieure à la largeur minimale de votre en-tête.