정적 위치에서 고정 된 위치로 전환 할 때 깜박임

Question

뷰포트 상단에 고정되어야하는 요소가있는 페이지가 있습니다. 이 작업을 수행하기 위해 Skrollr이라는 플러그인을 사용하고 있습니다. 내가 겪고있는 문제는 요소가 뷰포트 상단에 도달하여 fixed으로 전환하면 그 안에 내용이 깜박이거나 이동하는 것처럼 보입니다. 이것은 내가 다소 빨리 스크롤 할 때만 발생합니다. 천천히 스크롤하면 깜빡이거나 움직이지 않습니다.

여기 내가 보는 문제의 예가있는 jsfiddle입니다. Chrome 이외의 다른 브라우저는 아직 테스트하지 않았습니다.

http://jsfiddle.net/dmcgrew/sYV6L/

업데이트 jsfiddle .. 조금 후 다시 아래로 이동하는 방법을 녹색 블록 위로 스크롤 뷰포트의 상단 지난보세요. 이것은 스크롤 할 때만 발생합니다 .. http://jsfiddle.net/dmcgrew/sYV6L/1/

Answer 1

보기에서 div를 100 % 너비로 다시 자르고 뷰포트 크기로 다시 렌더링합니다. position: static에 있으면 요소가 DOM 흐름 내에 있고 부모 요소로 바인딩됩니다. 그러나 position: fixed에있을 때 해당 parent => child 관계가 손상되고 요소가 DOM 흐름에서 제거됩니다. 이렇게하면 브라우저가 DOM 흐름의 요소없이 DOM을 다시 칠하도록합니다.

이 때문에 플래시가 켜지고 다시 조정됩니다. 이것이 문제가 될 경우, 그것을 완화하기 위해 일종의 전환 (jQuery 애니메이션 등)을 사용하거나 창을 다시 그리도록 강요하지 않는 다른 플러그인을 사용할 것을 제안합니다.