CSS: posizione fissa sull'asse x ma non y?


104

C'è un modo per fissare una posizione solo sull'asse x? Quindi, quando un utente scorre verso l'alto, il tag div scorrerà verso l'alto con esso, ma non lateralmente?


3
Va bene se fornissi una soluzione JS a questo problema?
Starx

1
Hai bisogno di javascript per farlo.
LostLin

@Starx - non è solo OK, è necessario :-)
Pete Wilson

Di recente ho risposto a una domanda simile che potrebbe essere più simile a ciò che stai cercando: stackoverflow.com/questions/8673560/…
Wex

So che è una domanda piuttosto vecchia, ma hai ancora problemi con questa domanda?
Starx

Risposte:


58

È una tecnica semplice che utilizza anche lo script. Puoi anche controllare una demo qui .

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;
}

Credito di aggiornamento : @ PierredeLESPINAY

Come commentato, per fare in modo che lo script supporti le modifiche nel css senza doverle ricodificare nello script. Puoi usare quanto segue.

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 :)


@PeteWilson, Ok controlla questa soluzione
Starx

2
Cosa ne pensi di ottenere il leftvalore all'inizio della funzione come init_left = $('#header').position()['left']o qualcosa di simile?
Pierre de LESPINAY

@PierredeLESPINAY, Sì, ottimo punto. Ciò lo renderebbe abbastanza flessibile da supportare i cambiamenti.
Starx

2
Amo questa soluzione e l'ho usata io stesso. Un problema che ho con esso, però, è che gli aggiornamenti sono un po 'discontinui quando esegui uno scorrimento fluido (ad esempio: trascinando la barra di scorrimento). Sembra che l'aggiornamento javascript sia più lento dell'aggiornamento CSS. Qualche soluzione per questo?
jsarma


12

Se il tuo blocco è originariamente posizionato come statico, potresti provare questo

$(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>


8

No, non è possibile con CSS puro. Questo tipo di posizionamento fissa l'elemento nella finestra. Suggerirei semplicemente di fissare l'elemento a uno dei lati della visualizzazione (cioè in alto, in basso, a sinistra oa destra) in modo che non interferisca con altri contenuti.


7

Ora che i dispositivi mobili provengono per oltre il 70% dal mercato Internet, puoi creare qualcosa di intelligente e reattivo per farlo.

Puoi crearlo molto facilmente con solo css, usa un overflow-x: scroll per un contenitore e un overflow-y: scroll per un altro contenitore. È possibile posizionare facilmente gli elementi del contenitore con larghezza: 100vw e altezza: 100vh.

Fare clic con il pulsante centrale sull'esempio per provarlo. Funziona meglio sui dispositivi mobili perché non vedi le barre di scorrimento.

body{max-width:100%}
*{box-sizing:border-box;}
.container{background:#ddd;overflow-y:scroll;width:500px;max-height:100vh;}
.header{background: pink;}
.body{background: teal;padding:20px;min-width: 100%;overflow:scroll;overflow-y:hidden;min-height:300px;}
.body >div{min-width:800px;}
<body>
  <div class="container">
    <div class="header">
       Button 1 > Button 2 > Button 3
    </div>
    <div class="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>


Non mi piace che la barra di scorrimento inferiore sia visibile solo scorrendo verso i piedi ...
Fanky

Su un browser mobile non verrà visualizzato. Su Chrome puoi nasconderlo con questo CSS .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}. Su Firefox puoi nasconderlo posizionandolo fuori da un overflow:hiddencontenitore. Ma questa è un'altra domanda a cui è stata data risposta prima, ne sono sicuro.
EPurpl3

2

La soluzione di Starx mi è stata estremamente utile. Ma ho avuto alcuni problemi quando ho provato a implementare una barra laterale a scorrimento verticale con esso. Ecco il mio codice iniziale, basato su ciò che ha scritto Starx:

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

È leggermente diverso dalla soluzione di Starx, perché penso che il suo codice sia progettato per consentire a un menu di fluttuare orizzontalmente invece che verticalmente. Ma questo è solo un accenno. Il problema che ho avuto con il codice sopra è che in molti browser, oa seconda del carico di risorse del computer, i movimenti del menu sarebbero stati discontinui, mentre la soluzione CSS iniziale era piacevole e fluida. Attribuisco questo ai browser che sono più lenti nell'attivare eventi javascript rispetto all'implementazione di CSS.

La mia soluzione alternativa a questo problema di instabilità è impostare il frame su fisso invece che assoluto, quindi annullare i movimenti orizzontali usando il metodo di starx.

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

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

Potresti dire che tutto ciò che sto facendo è scambiare la discontinuità dello scorrimento verticale con la discontinuità dello scorrimento orizzontale. Ma il fatto è che il 99% dello scorrimento è verticale, ed è molto più fastidioso quando è instabile rispetto a quando lo è lo scorrimento orizzontale.

Ecco il mio post correlato su questo argomento, se non ho già esaurito la pazienza di tutti: Correzione di un menu in una direzione in jquery


2

Mi sono imbattuto in questo post alla ricerca di un bel modo per mantenere la mia barra di navigazione / intestazione centrata e reattiva ai cambiamenti di dimensione.

//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)
  }
})

Mentre scorriamo, la barra si sposta verso l'alto fuori dallo schermo. Se scorri a sinistra / destra, rimarrà fisso.


Grazie Fratello. Questo ha funzionato. Così semplice però !! Genius you
Ram

0

Mi rendo conto che questo thread è molto vecchio ma mi ha aiutato a trovare una soluzione per il mio progetto.

Nel mio caso avevo un'intestazione che non volevo mai essere larga meno di 1000px, intestazione sempre in primo piano, con contenuti che potevano essere illimitati a destra.

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', '');
        }
    });

Questo dovrebbe essere gestito anche quando il tuo browser è inferiore alla larghezza minima delle intestazioni


0

Ho appena aggiunto la posizione: assoluta e questo ha risolto il mio problema.


8
Il posizionamento assoluto fissa gli elementi relativi al documento. Il posizionamento fisso li risolve rispetto alla finestra. Se l'uso di Absolute ha risolto il tuo problema, non hai avuto lo stesso problema di questa domanda per cominciare.
Niall

0

Questo è un thread molto vecchio, ma ho trovato una soluzione CSS pura a questo utilizzando alcuni annidamenti creativi. Non ero affatto un fan del metodo jQuery ...

Suona qui: 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;
}

6
La tua soluzione richiede lo scorrimento del div contenitore del contenuto invece della finestra effettiva, il che è tutt'altro che ideale: il tuo violino dimostra perché. I tuoi contenuti scorrono dal lato destro della pagina, ma la barra di scorrimento orizzontale non è sullo schermo. Questo è un grosso problema di usabilità.
Niall

0

Aggiornato lo script per controllare la posizione di partenza:

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' });
});

}



0

Sul div genitore puoi aggiungere

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

0
$(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
    });
});

Grazie


0

Sì, in realtà puoi farlo solo usando CSS ...

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

Dimmi se funziona


-1

La soluzione molto semplice è:

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

dovresti usare CSS3 position:fixedper questo piuttosto che andare per la soluzione js
Muhammad Omer Aslam

-3

Sembra che tu debba usare position: fixed e quindi impostare la posizione in alto su una percentuale e la e la posizione sinistra o destra su un'unità fissa.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.