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

Question

Y at-il un moyen de fixer une position sur l'axe des x seulement? Donc, quand un utilisateur fait défiler vers le haut, la balise div défilera avec elle, mais pas d'un côté à l'autre?

Answer 1

Sonne comme vous devez utiliser la position: fixe, puis définissez la position supérieure à un pourcentage et la position et soit la gauche ou la droite à une unité fixe.

Answer 2

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

Answer 3

C'est aussi une technique simple utilisant le script. Vous pouvez également consulter une démo here.

JQuery

$(window).scroll(function(){ 
    $('#header').css({ 
     'left': $(this).scrollLeft() + 15 
     //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left 
    }); 
}); 

CSS

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

---

Mise à jour Crédit: @PierredeLESPINAY

Comme commenté, de faire le script soutenir les changements dans le css sans avoir à les recoder dans le script. Vous pouvez utiliser ce qui suit.

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first 
$(window).scroll(function(){ 
    $('#header').css({ 
     'left': $(this).scrollLeft() + leftOffset //Use it later 
    }); 
}); 

Demo :)

Answer 4

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

function fix_vertical_scroll(id) { 
    $(window).scroll(function(){ 
     $(id).css({ 
      'top': $(this).scrollTop() //Use it later 
     }); 
    }); 
} 

Il est légèrement différent de la solution de Starx, parce que je pense que son code est conçu pour permettre un menu de flotter horizontalement plutôt que verticalement. Mais c'est juste un aparté. Le problème que j'ai eu avec le code ci-dessus est que dans beaucoup de navigateurs, ou en fonction de la charge de ressources de l'ordinateur, les mouvements de menu seraient saccadés, alors que la solution css initiale était agréable et lisse. J'attribue cela aux navigateurs étant plus lents à tirer des événements javascript qu'à mettre en application CSS.

Ma solution alternative à ce problème de hachage est de définir le cadre à fixe au lieu de absolu, puis d'annuler les mouvements horizontaux en utilisant la méthode de starx. Vous pourriez dire que tout ce que je fais est le commerce de hachoir à défilement vertical pour le clapot horizontal de défilement. Mais le fait est que 99% du défilement est vertical, et c'est beaucoup plus agaçant quand c'est plus saccadé que lorsque le défilement horizontal est.

Voici mon poste lié à ce sujet, si je ne l'ai pas déjà épuisé la patience de tout le monde: Fixing a menu in one direction in jquery

Answer 5

Je sais que ce fil est puissant vieux mais il m'a aidé à trouver une solution pour mon projet.

Dans mon cas, j'avais un en-tête que je ne voulais jamais avoir moins de 1000px de large, l'en-tête toujours en haut, avec un contenu qui pouvait aller droit illimité.

header{position:fixed; min-width:1024px;} 
<header data-min-width="1024"></header> 

    $(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 gérer lorsque votre navigateur est inférieure à vos têtes min-width

Answer 6

Je position juste ajouté: absolue et qui a résolu mon problème.

Answer 7

Ceci est un très ancien thread, mais j'ai trouvé une solution CSS pure à cela en utilisant un emboîtement créatif. Je n'étais pas fan de la méthode jQuery du tout ...

Fiddle ici: https://jsfiddle.net/4jeuv5jq/

<div id="wrapper"> 
    <div id="fixeditem"> 
     Haha, I am a header. Nah.. Nah na na na 
    </div> 
    <div id="contentwrapper"> 
     <div id="content"> 
      Lorem ipsum..... 
     </div> 
    </div> 
</div> 

#wrapper { 
position: relative; 
width: 100%; 
overflow: scroll; 
} 

#fixeditem { 
position: absolute; 
} 

#contentwrapper { 
width: 100%; 
overflow: scroll; 
} 

#content { 
width: 1000px; 
height: 2000px; 
} 

Answer 8

mis à jour le script pour vérifier la position de départ:

function float_horizontal_scroll(id) { 
var el = jQuery(id); 
var isLeft = el.css('left') !== 'auto'; 
var start =((isLeft ? el.css('left') : el.css('right')).replace("px", "")); 
jQuery(window).scroll(function() { 
    var leftScroll = jQuery(this).scrollLeft(); 
    if (isLeft) 
     el.css({ 'left': (start + leftScroll) + 'px' }); 
    else 
     el.css({ 'right': (start - leftScroll) + 'px' }); 
}); 

}

Answer 9

Si vous souhaitez le corriger sur la droite, par exemple, utilisez justify-content: flex-end.

Plus: http://www.w3schools.com/cssref/css3_pr_justify-content.asp

Answer 10

Si votre bloc est à l'origine positionné comme statique, vous pouvez essayer cette

$(window).on('scroll', function() { 
 

 
    var $w = $(window); 
 
    $('.position-fixed-x').css('left', $w.scrollLeft()); 
 
    $('.position-fixed-y').css('top', $w.scrollTop()); 
 

 
});

.container { 
 
    width: 1000px; 
 
} 
 

 
.position-fixed-x { 
 
    position: relative; 
 
} 
 

 
.position-fixed-y { 
 
    position: relative; 
 
} 
 

 
.blue-box { 
 
    background:blue; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.red-box { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
<div class="position-fixed-y red-box"> 
 
    
 
</div> 
 

 
The pattern of base pairs in the DNA double helix encodes the instructions for building the proteins necessary to construct an entire organism. DNA, or deoxyribonucleic acid, is found within most cells of an organism, and most organisms have their own unique DNA code. One exception to this is cloned organisms, which have the same exact DNA code as their parents do. 
 

 
<div class="position-fixed-x blue-box"> 
 
    
 
</div> 
 

 
DNA strands are composed of millions of sub-units, called nucleotides. Each nucleotide contains a 5-carbon sugar, a phosphate group and a nitrogen base. There are four different variations of the nitrogen base group, responsible for all of the variation between two different DNA strands. The four different variations are called adenine, guanine, cytosine and thymine, but they are typically abbreviated and only referred to by their first letter. The sequence of these different nitrogen bases makes up the code of the DNA. 
 

 
The DNA strand splits in two, and forms two different DNA strands during cell replication. However, sometimes this process is not perfect, and mistakes occur. These mistakes may change the way an organism is constructed or functions. When this happens, it is called a mutation. These mutations can be helpful or harmful, and they are usually passed on to the organism’s offspring. 
 
    
 
The traits of a living thing depend on the complex mixture of interacting components inside it. Proteins do much of the chemical work inside cells, so they largely determine what those traits are. But those proteins owe their existence to the DNA (deoxyribonucleic acid), so that is where we must look for the answer. 
 
The easiest way to understand how DNA is organized is to start with its basic building blocks. DNA consists of four different sugars that interact with each other in specific ways. These four sugars are called nucleotide bases and have the names adenine (A), thymine (T), cytosine (C) and guanine (G). Think of these four bases as letters in an alphabet, the alphabet of life! 
 
If we hook up these nucleotides into a sequence--for example, GATCATCCG--we now have a little piece of DNA, or a very short word. A much longer piece of DNA can therefore be the equivalent of different words connected to make a sentence, or gene, that describes how to build a protein. And a still longer piece of DNA could contain information about when that protein should be made. All the DNA in a cell gives us enough words and sentences to serve as a master description or blueprint for a human (or an animal, a plant, or a microorganism). 
 
Of course, the details are a little more complicated than that! In practice, active stretches of DNA must be copied as a similar message molecule called RNA. The words in the RNA then need to be "read" to produce the proteins, which are themselves stretches of words made up of a different alphabet, the amino acid alphabet. Nobel laureates Linus Pauling, who discerned the structure of proteins, and James Watson and Francis Crick, who later deciphered the helical structure of DNA, helped us to understand this "Central Dogma" of heredity--that the DNA code turns into an RNA message that has the ability to organize 20 amino acids into a complex protein: DNA -> RNA -> Protein. 
 
To understand how this all comes together, consider the trait for blue eyes. DNA for a blue-eyes gene is copied as a blue-eyes RNA message. That message is then translated into the blue protein pigments found in the cells of the eye. For every trait we have--eye color, skin color and so on--there is a gene or group of genes that controls the trait by producing first the message and then the protein. Sperm cells and eggs cells are specialized to carry DNA in such a way that, at fertilization, a new individual with traits from both its mother and father is created. 
 
</div>

Answer 11

Sur div parent, vous pouvez ajouter

overflow-y: scroll; 
overflow-x: hidden; 

Answer 12

Ceci est un ancien thread mais CSS3 a une solution.

position: sticky; 

Have a loot at this blog post.

And this documentation.

Answer 13

$(window).scroll(function(){ 
    $('#header').css({ 
     'left': $(this).scrollLeft() + 15 
     //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left 
    }); 
}); 

Merci

Answer 14

solution est très simple:

window.onscroll = function(){ 
    document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px"; 
} 

Answer 15

Oui, vous pouvez réellement faire qu'en utilisant CSS ...

body { width:100%; margin-right: 0; margin-left:0; padding-right:0; padding-left:0; } 

Dites-moi si cela fonctionne