Div di fisso stile Apple store su SINISTRA

Question

Mi sto tirando i capelli. Ho una pagina web in cui mi piacerebbe avere un div di posizione fisso a sinistra (il pappagallo &) segui la pagina mentre scorre verso il basso. http://www.cartoonizemypet.com/new/help/

Sono riuscito a seguire questo tut http://jqueryfordesigners.com/fixed-floating-elements/ e ottenere quello che pensavo fosse un effetto perfetto! Poi ho provato a vederlo sul mio telefono .... Non appena ho ingrandito il div sparato spostato sul testo! :(Puoi vedere l'effetto su un normale browser riducendo la finestra del browser e scorrendo verso destra

Qualcuno conosce un modo per evitare che il pappagallo si muova orizzontalmente? Ho cercato in alto e in basso per una soluzione ma sta cominciando a sembrare impossibile.

Ecco il CSS

#content { 
    padding-top:20px; 
    padding-bottom:713px; /* Height of the footer element */ 
    width:888px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 

#help-col1 { 
    left:0; 
    width:218px; 
    position:absolute; 
    height:500px; 
} 

#parrot-box { 
    position:absolute; 
    top:0; 
    margin-top: 20px; 
} 

#parrot-box.fixed { 
    position:fixed; 
    top:0; 
} 

#help-col2 { 
    width:634px; 
    float:right; 
} 

Sentitevi liberi di controllare il sorgente della pagina (http://www.cartoonizemypet.com/new/help/) per vedere lo script e HTML. Qualsiasi aiuto sarebbe MOLTO apprezzato

Answer 1

Per non preoccuparsi di tutti, mio ​​marito ha trovato un modo alternativo per farlo funzionare! :)

Invece di spostare il pappagallo con la pagina; Ho intenzione di avere più versioni del pappagallo all'interno delle risposte.In questo modo quando un utente fa clic su una risposta si apre e il pappagallo appare accanto a esso.

Non come inizialmente avevo pianificato, ma penso di poter rendere questo nuovo modo ancora migliore!

Grazie per l'aiuto in ogni caso! :)

Answer 2

Quando il pappagallo ottiene la classe 'fissa', il pappagallo (dentro # help-col1) ha un valore 'sinistro' di 0. Ciò significa che sarà sempre attaccato alla parte sinistra della pagina ... non importa quale le dimensioni della finestra sono, e come scorre.

Quello che stai chiedendo è che si comporti come un elemento posizionato fisso quando l'utente scorre verticalmente, ma non orizzontalmente. Per quanto ne so, questo non è possibile. Risolto il problema risolto xey y.

Tuttavia, ci sono alcune soluzioni (like this one) che parlano dell'utilizzo di javascript per risolvere questo problema. La teoria qui è che un piccolo javascript può ascoltare quando la pagina è stata scrollata orizzontalmente e, se lo ha, spinge di nuovo il pappagallo di conseguenza.

Personalmente, ho cercato di utilizzare css media queries per rendere un layout specifico per dispositivi mobili. Puoi assegnare CSS specifici per la versione mobile del sito, quindi spero che l'utente non abbia bisogno di eseguire lo zoom (o lo scorrimento orizzontale) =)

Buona fortuna!

Answer 3

Il listener di eventi di scorrimento JS è stato suggerito, ma tutte le implementazioni che fanno affidamento su di esso sono sistematicamente in ritardo. Immagino che avresti maggiore fortuna nell'utilizzare le media query per determinare se il posizionamento fisso sia appropriato o meno (ad esempio se la finestra/dispositivo è sufficientemente ampia o se sostituisci con un comportamento alternativo se non lo è).

Si potrebbe effettivamente lasciare il pappagallo in alto per gli schermi stretti e conservare alcuni beni immobili, nonché affrontare l'incapacità delle versioni precedenti di Safari mobile di interpretare correttamente position:fixed. Si potrebbe certamente implementare un approccio più raffinato, ma questo dovrebbe essere un buon punto di partenza - per provarlo, eseguire il seguente script nella pagina (solo nella console va bene):

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>'); 

In primo luogo è la priorità la dichiarazione originale #parrot-box.fixed e quindi applica lo stile mobile a ogni volta che la finestra è larga almeno 982px (larghezza del wrapper della pagina).