Come creare un elemento "fisso" scorrevole

StackOverflow https://stackoverflow.com/questions/9383906

Domanda

So che sembra un po 'controintuitivo, ma lasciami spiegare cosa sto cercando di fare.

Ho un grande elemento che funge da sfondo. Non si ridimensiona. È spesso più grande dello schermo su cui è visualizzato. La maggior parte del contenuto di questo elemento (è solo un'immagine) è vicino al centro. Diciamo che l'unica informazione necessaria è nel mezzo di 800px e il tutto è largo 1600px.

Perché è più ampio del necessario? Perché svanisce piacevolmente nel resto dello sfondo e si aggiunge alla progettazione del sito.

Quindi ho fatto l'elemento fisso e ho usato un trucco standard per centrarlo. Funziona perfettamente su un monitor di grandi dimensioni. Rimane centrato, se in parte è un po 'troppo grande, non ti consente di scorrere per vedere cosa è praticamente nulla. Mi piace.

Ma se lo schermo è troppo piccolo, non puoi vedere tutto. Non puoi semplicemente impostare la larghezza minima o il minimo della pagina perché quando vai a scorrere, l'immagine di sfondo rimane in atto, perché è fissa.

Se ci fosse un modo per avere un elemento fisso effettivamente muoversi con tutto il resto quando la pagina viene scorreta, ciò funzionerebbe perfettamente, perché potrei specificare la larghezza minima delle dimensioni degli elementi richiesti dell'immagine. Funzionerebbe molto bene.

Altrimenti, un'altra soluzione sarebbe quella di utilizzare un'altra forma di posizionamento che consente la prevenzione di essere in grado di scorrere per vedere tutto. Quindi, ancora una volta, potrei semplicemente impostare il tutto con una larghezza minima, il che mi consentirebbe di impostare esattamente quanto del contenuto è scorrevole.

È possibile qualcuno di tutto ciò? Mi sento come se mi mancasse qualcosa di semplice. Idealmente non dovrei ridimensionare alcuna immagini, servire più fogli CSS o usare elaborato JavaScript o qualcosa del genere. Grazie per l'aiuto!

È stato utile?

Soluzione

Ho finalmente risolto questo problema dopo una tonnellata di sperimentazione e la soluzione si è rivelata essere CSS di base, il che è fantastico.

Vado a grandi dettagli che illustrano questa soluzione sul mio blog. In alternativa, ecco il Demo di lavoro.

Html

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>

Altri suggerimenti

So che preferiresti non usare elaborato javascript .... la libreria jQuery consente alcune piccole correzioni fantastiche su cose come questa con un minimo di codice ... Potresti anche usare uno snippet relativamente piccolo senza jQuery ... praticamente tutto È necessario fare è impostare un ascoltatore di eventi per Window.scroll e impostare il tuo fissolement.scrolltop in modo da abbinare ...

Esempio rapido jQuery:

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});

Non sono sicuro di sapere esattamente cosa vuoi fare, ma lo snippet di CSS di seguito potrebbe aiutarti. Non sono sicuro.

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

È possibile impostare il tuo posizionamento usando qualsiasi combinazione di attributi in quel frammento e il background-attachment è ciò che lo rende scorrevole.

Sarebbe utile se avessi pubblicato il tuo CSS per quello che hai attualmente, quindi potremmo davvero aiutarti. Fammi sapere se posso essere più chiaro.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top