DIV sfarfallio quando posizionandole fisso durante lo scorrimento all'interno di una Div

Question

Ho 4 DIV e sono posizioni mutevoli di 4 elementi di scorrimento come sotto

function adjustPositions(e) { 
    var div = e ? $(this) : $('.parent'); 
    div.find('.left').css({ 
     left: div.scrollLeft() + "px" 
    }); 
    var right = div.find('.right'); 
    right.css({ 
     left: div.scrollLeft() + div.width() - right.width() + "px" 
    }); 
    div.find('.header').css({ 
     top: div.scrollTop() + "px" 
    }); 
    var bottom = div.find('.footer'); 
    bottom.css({ 
     top: div.scrollTop() + div.height() - bottom.height() + "px" 
    }); 
} 
adjustPositions(); 
$('.parent').on('scroll', adjustPositions); 

Ecco il violino http://jsfiddle.net/8NL2S/5/, quando sto testando in Safari , sfarfallio. Niente di strano in questo. Safari ha dato un calcio alle mie speranze come questa nello stesso caso molte volte. Come posso risolvere questo problema.

Answer 1

se le dimensioni div sono fissi e si desidera sulla stessa posizione in tutti i browser, allora non c'è bisogno di chiamare la funzione js semplicemente impostare float css: left; proprietà con tutte le tue div e usa la classe cf sulla div esterna di quel 4 div. Esempio è:

HTML: 

<div class="parent"> 
    <div class="static cf"> 
     <div class="left"></div> 
     <div class="right"></div> 
     <div class="header"></div> 
     <div class="footer"></div> 
    </div> 
</div> 

CSS: 


.header{ 
    border:1px solid red; 
    width:100px; 
    height:100px; 
    background-color:#F2F2F2; 
    float:left; 
    top:0px; 
    left:0px; 
    z-index:10; 
} 
.left{ 
    border:1px solid red; 
    height:100px; 
    width:100px; 
    left:0px; 
    float:left; 
    top:100px; 
    background-color:#CCC; 
} 
.right{ 
    border:1px solid red; 
    height:100px; 
    width:100px; 
    right:0px; 
    float:left; 
    top:100px; 
    background-color:#CCC; 
} 
.footer{ 
    border:1px solid red; 
    width:100px; 
    height:100px; 
    background-color:#F2F2F2; 
    float:left; 
    left:0px; 
    bottom:0px; 
    z-index:10; 
} 
.static{ 
    height:105px; 
    width:410px; 
    position:relative; 
} 
.cf{clear:both} 

Answer 2

Lo sfarfallio dei riquadri a causa del ri-rendering/riposizionamento delle div quando si scorre, a causa delle loro funzioni di scorrimento. Per evitare ciò, è meglio usare un metodo diverso per creare il tuo display.

Come sembra utilizzare un semplice html con allegati css e jquery, ci sono molti altri modi per aggirare il problema.

Il primo modo sarebbe quello di rimuovere semplicemente le funzioni di scorrimento, non sembra che ne abbiate bisogno. position:fixed risolverà il problema in modo che i tuoi subacquei ti seguano quando scorri.

l'altro modo sarebbe utilizzare qualsiasi tipo di quadro. Questo può essere basato su CSSGrid come Kerry Liu ha mostrato un esempio nei commenti, o se sei disperato può essere basato su HTML (come <frame>).

Se si dispone di requisiti più elevati per lo styling, quindi il posizionamento, allora forse c'è un plug-in di Jquery disponibile per aiutarti ulteriormente.

Answer 3

Si potrebbe desiderare qualcosa del genere?
http://jsfiddle.net/sijav/8NL2S/12/
è necessario attivare ogni position:fixed ... noo necessario utilizzare JQuery

Answer 4

mi potrebbe pensare troppo semplice qui, ma non position: fixed risolto il problema?

Ho paura che non ci siano buone soluzioni incluso javascript. La velocità di Safari nella gestione di javascript non è ancora abbastanza buona per ottenere un'animazione fluente.

Qui di seguito troverai la soluzione migliore per risolvere il tuo problema, utilizzando solo CSS.

Ho modificato il CSS al seguente:

.header{ 
    width:1000px; 
    height:100px; 
    background-color:#F2F2F2; 
    position:fixed; 
    top:0px; 
    left:0px; 
    z-index:10; 
} 
.left{ 
    height:1000px; 
    width:100px; 
    left:0px; 
    position:fixed; 
    top:100px; 
    background-color:#CCC; 
} 
.right{ 
    height:1000px; 
    width:100px; 
    right:0px; 
    position:fixed; 
    top:100px; 
    background-color:#CCC; 
} 
.footer{ 
    width:1000px; 
    height:100px; 
    background-color:#F2F2F2; 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    z-index:10; 
} 
.static{ 
    height:1000px; 
    width:1000px; 
    position:relative; 
} 

ho rimosso tutto javascript. A parte questo, nulla è cambiato.

Vedi fiddle

Answer 5

Utilizzando position:fixed il modo suggerito sopra sarà posizionare le div interna rispetto alla finestra, e non il div genitore. Se si desidera mantenere tutto dentro .parent, utilizzare il CSS di seguito (non necessario) JS:

.parent { 
    position:relative; 
    height:400px; 
    width:800px; 
    margin:0 auto; 
    overflow:auto; 
    border:1px solid #CCC; 
} 
.header, .footer { 
    position:fixed; 
    width: 800px; /* .parent width */ 
    height:100px; 
    z-index:10; 
    background-color:#F2F2F2; 
} 

.footer { 
    margin-top: 300px; /* .parent hight - .footer hight */ 
} 

.left, .right { 
    position:fixed; 
    width: 100px; 
    height: 400px; /* .parent height */ 
    background-color:#CCC; 
} 

.right { 
    margin-left: 700px; /* .parent width - .right width */ 
} 

.static { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 1000px; 
    height: 1000px; 
} 

questo dovrebbe dare il layout e il comportamento si sta cercando di raggiungere senza lo sfarfallio. Puoi provarlo di seguito.

http://jsfiddle.net/myajouri/VYmHv/1/

Speranza che aiuta!