DIV nhấp nháy khi định vị chúng cố định khi di chuyển bên trong một Div

Question

Tôi có 4 DIV và tôi thay đổi vị trí của 4 yếu tố trên cuộn như dưới đây

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

Đây là fiddle http://jsfiddle.net/8NL2S/5/, khi tôi thử nghiệm nó trong Safari , nó nhấp nháy. Không có gì lạ mắt trong chuyện này. Safari đá hy vọng của tôi như thế này trong trường hợp tương tự nhiều lần. Làm thế nào tôi có thể sửa lỗi này.

Answer 1

nếu kích thước div của bạn là cố định và bạn muốn trên cùng một vị trí trong tất cả các trình duyệt sau đó không cần phải gọi hàm js chỉ cần đặt css float: left; tài sản với tất cả các div của bạn và sử dụng lớp cf trên div bên ngoài của 4 div đó. Ví dụ:

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

Khung hình của bạn nhấp nháy vì các hình ảnh tái xuất hiện/vị trí lại khi bạn cuộn, do chức năng cuộn của chúng. Để ngăn chặn điều này, bạn nên sử dụng phương pháp tạo màn hình khác.

Khi bạn có vẻ sử dụng html thuần túy với các tệp css và jquery được đính kèm, có nhiều cách khác để giải quyết vấn đề của bạn.

Cách đầu tiên là chỉ cần xóa các chức năng cuộn của bạn, có vẻ như bạn không cần đến chúng. position:fixed sẽ sửa lỗi để div của bạn theo dõi bạn khi bạn cuộn.

cách khác sẽ sử dụng bất kỳ loại khung nào. Điều này có thể được dựa trên CSSGrid như Kerry Liu cho thấy một ví dụ về trong các ý kiến, hoặc nếu bạn đang tuyệt vọng nó có thể được dựa trên html (như <frame>).

Nếu bạn có yêu cầu cao hơn về kiểu dáng thì vị trí có thể có sẵn một plugin Jquery để trợ giúp bạn thêm.

Answer 3

Bạn có thể tìm kiếm nội dung như thế này?
http://jsfiddle.net/sijav/8NL2S/12/
bạn phải bật mỗi position:fixed ... noo cần phải sử dụng JQuery

Answer 4

tôi có thể nghĩ quá đơn giản ở đây, nhưng không position: fixed giải quyết vấn đề của bạn?

Tôi e rằng không có giải pháp tốt nào bao gồm javascript. Tốc độ xử lý javascript của Safari chưa đủ tốt, để có được hoạt ảnh trôi chảy.

Dưới đây bạn sẽ tìm thấy giải pháp tốt nhất tiếp theo để khắc phục sự cố của mình, chỉ sử dụng css.

tôi sửa CSS của bạn như sau:

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

Tôi đã gỡ bỏ tất cả javascript. Ngoài ra, không có gì thay đổi.

Xem fiddle

Answer 5

Cách được đề xuất ở trên sẽ định vị div bên trong của bạn so với cửa sổ chứ không phải div mẹ. Nếu bạn muốn giữ lại tất cả mọi thứ bên trong .parent, sử dụng CSS bên dưới (không JS cần thiết):

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

Điều này sẽ cho bố trí và hành vi mà bạn đang cố gắng để đạt được nếu không có sự nhấp nháy. Bạn có thể thử nó dưới đây.

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

Hy vọng rằng sẽ giúp!