Existe-t-il un moyen de fixer une position sur l'axe des x uniquement? Ainsi, lorsqu'un utilisateur fait défiler vers le haut, la balise div défilera avec elle, mais pas d'un côté à l'autre?
Je connais sa question assez ancienne, mais avez-vous toujours des problèmes avec cette question?
Starx
Réponses:
58
C'est une technique simple utilisant également le script. Vous pouvez également consulter une démo ici .
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});});
Comme commenté, pour que le script prenne en charge les modifications du 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});});
Que pensez-vous d'obtenir la leftvaleur au début de la fonction init_left = $('#header').position()['left']ou quelque chose de similaire?
Pierre de LESPINAY
@PierredeLESPINAY, Oui, très bon point. Cela le rendrait suffisamment flexible pour supporter les changements.
Starx
2
J'adore cette solution et je l'ai juste utilisée moi-même. Un problème que j'ai avec cela est que les actualisations sont un peu saccadées lorsque vous faites un défilement fluide (par exemple: en faisant glisser la barre de défilement). Il semble que l'actualisation javascript soit plus lente que l'actualisation css. Une solution pour ça?
jsarma
17
Il s'agit d'un ancien thread mais CSS3 a une solution.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container"><divclass="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.
<divclass="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>
Non, ce n'est pas possible avec du CSS pur. Ce type de positionnement fixe l'élément dans la fenêtre. Je suggérerais simplement de fixer l'élément sur l'un des côtés de la fenêtre d'affichage (c'est-à-dire en haut, en bas, à gauche ou à droite) afin qu'il n'interfère pas avec d'autres contenus.
Maintenant que le mobile est à plus de 70% du marché Internet, vous pouvez créer quelque chose d'intelligent et de réactif pour le faire.
Vous pouvez créer cela très facilement avec uniquement css, utilisez un overflow-x: scroll pour un conteneur et un overflow-y: scroll pour un autre conteneur. Vous pouvez facilement positionner les éléments du conteneur avec une largeur: 100vw et une hauteur: 100vh.
Cliquez du milieu sur l'exemple pour le tester. Fonctionne mieux sur mobile car vous ne voyez pas les barres de défilement.
<body><divclass="container"><divclass="header">
Button 1 > Button 2 > Button 3
</div><divclass="body"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div></div></div></body>
Je n'aime pas que la barre de défilement du bas soit visible uniquement en défilant jusqu'au pied ...
Fanky
Sur un navigateur mobile, il n'apparaîtra pas. Sur Chrome, vous pouvez le masquer avec ce CSS .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}. Sur Firefox, vous pouvez le masquer en le plaçant à l'extérieur d'un overflow:hiddenconteneur. Mais c'est une autre question à laquelle on a déjà répondu, j'en suis sûr.
EPurpl3
2
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 à défilement vertical avec. Voici 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});});}
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 ce n'est qu'un aparté. Le problème que j'ai eu avec le code ci-dessus est que dans de nombreux navigateurs, ou en fonction de la charge de ressources de l'ordinateur, les mouvements du menu seraient saccadés, alors que la solution css initiale était agréable et fluide. J'attribue cela au fait que les navigateurs sont plus lents à déclencher des événements javascript qu'à implémenter css.
Ma solution alternative à ce problème d'agitation est de définir le cadre sur fixe au lieu d'absolu, 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 le saccadé du défilement vertical contre le saccadé du défilement horizontal. Mais le fait est que 99% du défilement est vertical, et c'est beaucoup plus ennuyeux lorsqu'il est saccadé que lorsque le défilement horizontal l'est.
Je suis tombé sur cet article à la recherche d'un bon moyen de garder mon en-tête / barre de navigation centré et réactif aux changements de taille.
//CSS.nav-container {
height:60px;/*The static height*/
width:100%;/*Makes it responsive to resizing the browser*/
position:fixed;/*So that it will always be in the center*/}//jQuery
$(window).scroll(()=>{if($(document).scrollTop()<60){
$('.nav-container').css('top', $(document).scrollTop()*-1)}})
Lorsque nous faisons défiler, la barre se déplace vers le haut hors de l'écran. Si vous faites défiler vers la gauche / droite, il restera fixe.
Merci frere. Cela a fonctionné. Si simple cependant !! Genius you
Ram
0
Je me rends compte que ce fil est très vieux, mais cela m'a aidé à trouver une solution pour mon projet.
Dans mon cas, j'avais un en-tête que je voulais ne jamais avoir moins de 1000 px de large, un en-tête toujours au-dessus, avec un contenu qui pouvait être illimité à droite.
Le positionnement absolu corrige les éléments relatifs au document. Le positionnement fixe les corrige par rapport à la fenêtre. Si l'utilisation d'absolue a résolu votre problème, vous n'avez pas eu le même problème que cette question pour commencer.
Niall
0
C'est un fil très ancien, mais j'ai trouvé une solution CSS pure à cela en utilisant une imbrication créative. Je n'étais pas du tout fan de la méthode jQuery ...
Votre solution nécessite de faire défiler le conteneur div du contenu au lieu de la fenêtre réelle, ce qui est loin d'être idéal - votre violon démontre pourquoi. Votre contenu s'exécute sur le côté droit de la page, mais la barre de défilement horizontale n'est pas à l'écran. C'est un gros problème de convivialité.
Niall
0
Mise à jour du script pour vérifier la position de départ:
$(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});});
vous devriez utiliser CSS3 position:fixedpour cela plutôt que d'opter pour la solution js
Muhammad Omer Aslam
-3
On dirait que vous devez utiliser la position: fixe, puis définissez la position supérieure sur un pourcentage et la position gauche ou droite sur une unité fixe.
Réponses:
C'est une technique simple utilisant également le script. Vous pouvez également consulter une démo ici .
JQuery
CSS
Crédit de mise à jour : @ PierredeLESPINAY
Comme commenté, pour que le script prenne en charge les modifications du css sans avoir à les recoder dans le script. Vous pouvez utiliser ce qui suit.
Démo :)
la source
left
valeur au début de la fonctioninit_left = $('#header').position()['left']
ou quelque chose de similaire?Il s'agit d'un ancien thread mais CSS3 a une solution.
Jetez un œil à ce billet de blog.
Manifestation:
Et cette documentation.
la source
Si votre bloc est initialement positionné comme statique, vous pouvez essayer ceci
la source
Non, ce n'est pas possible avec du CSS pur. Ce type de positionnement fixe l'élément dans la fenêtre. Je suggérerais simplement de fixer l'élément sur l'un des côtés de la fenêtre d'affichage (c'est-à-dire en haut, en bas, à gauche ou à droite) afin qu'il n'interfère pas avec d'autres contenus.
la source
Maintenant que le mobile est à plus de 70% du marché Internet, vous pouvez créer quelque chose d'intelligent et de réactif pour le faire.
Vous pouvez créer cela très facilement avec uniquement css, utilisez un overflow-x: scroll pour un conteneur et un overflow-y: scroll pour un autre conteneur. Vous pouvez facilement positionner les éléments du conteneur avec une largeur: 100vw et une hauteur: 100vh.
Cliquez du milieu sur l'exemple pour le tester. Fonctionne mieux sur mobile car vous ne voyez pas les barres de défilement.
la source
.yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}
. Sur Firefox, vous pouvez le masquer en le plaçant à l'extérieur d'unoverflow:hidden
conteneur. Mais c'est une autre question à laquelle on a déjà répondu, j'en suis sûr.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 à défilement vertical avec. Voici mon code initial, basé sur ce que Starx a écrit:
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 ce n'est qu'un aparté. Le problème que j'ai eu avec le code ci-dessus est que dans de nombreux navigateurs, ou en fonction de la charge de ressources de l'ordinateur, les mouvements du menu seraient saccadés, alors que la solution css initiale était agréable et fluide. J'attribue cela au fait que les navigateurs sont plus lents à déclencher des événements javascript qu'à implémenter css.
Ma solution alternative à ce problème d'agitation est de définir le cadre sur fixe au lieu d'absolu, puis d'annuler les mouvements horizontaux en utilisant la méthode de starx.
Vous pourriez dire que tout ce que je fais, c'est échanger le saccadé du défilement vertical contre le saccadé du défilement horizontal. Mais le fait est que 99% du défilement est vertical, et c'est beaucoup plus ennuyeux lorsqu'il est saccadé que lorsque le défilement horizontal l'est.
Voici mon article sur ce sujet, si je n'ai pas déjà épuisé la patience de tout le monde: Correction d'un menu dans une direction dans jquery
la source
Je suis tombé sur cet article à la recherche d'un bon moyen de garder mon en-tête / barre de navigation centré et réactif aux changements de taille.
Lorsque nous faisons défiler, la barre se déplace vers le haut hors de l'écran. Si vous faites défiler vers la gauche / droite, il restera fixe.
la source
Je me rends compte que ce fil est très vieux, mais cela m'a aidé à trouver une solution pour mon projet.
Dans mon cas, j'avais un en-tête que je voulais ne jamais avoir moins de 1000 px de large, un en-tête toujours au-dessus, avec un contenu qui pouvait être illimité à droite.
Cela devrait également gérer lorsque votre navigateur est inférieur à la largeur minimale de vos en-têtes
la source
Je viens d'ajouter la position: absolue et cela a résolu mon problème.
la source
C'est un fil très ancien, mais j'ai trouvé une solution CSS pure à cela en utilisant une imbrication créative. Je n'étais pas du tout fan de la méthode jQuery ...
Fiddle ici: https://jsfiddle.net/4jeuv5jq/
la source
Mise à jour du script pour vérifier la position de départ:
}
la source
Si vous souhaitez le réparer à droite, par exemple, utilisez
justify-content: flex-end
.En savoir plus: http://www.w3schools.com/cssref/css3_pr_justify-content.asp
la source
Sur div parent, vous pouvez ajouter
la source
Merci
la source
Oui, vous ne pouvez le faire qu'en utilisant CSS ...
Dis moi si ça marche
la source
La solution très simple est:
la source
position:fixed
pour cela plutôt que d'opter pour la solution jsOn dirait que vous devez utiliser la position: fixe, puis définissez la position supérieure sur un pourcentage et la position gauche ou droite sur une unité fixe.
la source