DIV migotanie przy pozycjonowaniu im stałe podczas przewijania wewnątrz div

Question

Mam 4 DIV i jestem zmieniających pozycje 4 elementów na zwoju jak poniżej

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

Oto skrzypce http://jsfiddle.net/8NL2S/5/, gdy jestem testowania go w Safari , migocze. Nic w tym dziwnego. Safari tak wiele razy kopiło moje nadzieje w tym samym przypadku. Jak mogę to naprawić.

Answer 1

jeśli rozmiary div są stałe i chcesz na tej samej pozycji we wszystkich przeglądarce następnie bez konieczności wywołania funkcji js prostu ustawić css pływak: left; właściwość ze wszystkimi elementami div i użyj klasy cf na zewnętrznym div tego 4 div. Przykładem jest:

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

Twoje ramki migoczą z powodu ponownego renderowania/zmiany położenia elementów div podczas przewijania, ze względu na ich funkcje przewijania. Aby temu zapobiec, najlepiej jest użyć innej metody tworzenia ekranu.

Ponieważ wydaje się, że używasz zwykłego html z załączonymi plikami css i jquery, istnieje wiele innych sposobów na obejście problemu.

Pierwszym sposobem byłoby po prostu usunięcie funkcji przewijania, nie wygląda na to, że są potrzebne. position:fixed naprawi to, aby Twoi divy podążali za tobą podczas przewijania.

w inny sposób korzystałby z dowolnego rodzaju ram. Może to być oparte na CSSGrid, ponieważ Kerry Liu pokazał przykład w komentarzach lub jeśli jesteś zdesperowany, to może być oparty na html (np. <frame>).

Jeśli masz wyższe wymagania dotyczące stylizacji, wtedy pozycjonowanie może być dostępne dzięki wtyczce Jquery, która pomoże ci dalej.

Answer 3

Może szukasz czegoś takiego?
http://jsfiddle.net/sijav/8NL2S/12/
trzeba włączyć każdy position:fixed ... noo trzeba użyć jQuery

Answer 4

mogę myśleć zbyt proste tutaj, ale nie position: fixed w rozwiązaniu problemu?

Obawiam się, że nie ma dobrych rozwiązań, w tym javascript. Szybkość Safari w obsłudze javascript nie jest jeszcze wystarczająco dobra, aby uzyskać płynną animację.

Poniżej znajdziesz najlepsze rozwiązanie problemu, używając tylko css.

edytowany CSS na następujące kwestie:

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

usunąłem wszystkie JavaScript. Poza tym nic się nie zmieniło.

Zobacz fiddle

Answer 5

Korzystanie position:fixed sposób sugerowany powyżej umieści swoje wewnętrzne div względem okna, a nie div nadrzędnej. Jeśli chcesz zachować wszystko wewnątrz .parent użyj CSS poniżej (brak potrzebne 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; 
} 

to powinno dać układ i zachowanie próbujesz osiągnąć bez migotania. Możesz spróbować tego poniżej.

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

nadzieję, że pomoże!