js 완벽 한 해결 IE6 지원 하지 않 는 position: fixed bug

코드 부터 볼 게 요.

11111111111111111

상기 코드 는 인터넷 에서 흔히 볼 수 있 습 니 다. html {overflow: hidden} 과 body {height: 100%, overflow: auto} 를 설정 하여 ie6 아래 position: fixed 효 과 를 실현 합 니 다. 그러나 이런 방법 은 결함 이 있 습 니 다. 그것 은 바로 페이지 에 있 는 absolute, relation 을 모두 fixed 의 효과 로 만 들 수 있 습 니 다. 여기 서 저 는 demo 를 하지 않 겠 습 니 다. 의심 이 있 으 면 직접 시험 해 볼 수 있 습 니 다.
그래서 저 는 자 료 를 찾 아 보 았 습 니 다. 인터넷 익스플로러 의 CSS 표현 식 (expression) 을 통 해 ie6 아래 position: fixed 효 과 를 완벽 하 게 실현 할 수 있 음 을 발 견 했 습 니 다. css 코드 는 다음 과 같 습 니 다.

/*  IE6         */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6         */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

위의 코드 는 직접 사용 할 수 있 습 니 다. 만약 에 요소 의 부상 거 리 를 설정 하려 면 각각 두 번 설정 해 야 합 니 다. 예 를 들 어 저 는 특정한 요소 가 상단 10 개의 픽 셀 에서 떨 어 지게 하고 왼쪽 에서 10 개의 픽 셀 까지 떨 어 지게 하려 면 이렇게 써 야 합 니 다.

/*  IE6         */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6         */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}

이렇게 되면 IE6 에서 position: fixed 의 효과 가 해결 되 고 다른 absolute, relation 에 영향 을 주지 않 지만 또 하나의 문 제 는 떠 있 는 요소 가 진동 하 는 것 이다.
IE 는 여러 단계 의 렌 더 링 프로 세 스 가 있 습 니 다.브 라 우 저 크기 를 스크롤 하거나 조정 할 때 모든 내용 을 초기 화하 고 페이지 를 다시 그립 니 다. 이 때 css 표현 식 을 다시 처리 합 니 다.이것 은 추 한 '진동' bug 를 일 으 킬 수 있 습 니 다. 이 곳 에 고정된 위치 에 있 는 요 소 는 당신 의 (페이지 의) 스크롤 을 따라 가 야 하기 때문에 '뛰 기' 를 할 것 입 니 다.이 문 제 를 해결 하 는 방법 은 바로 background - attachment: fixed 를 사용 하여 body 나 html 요소 에 background - image 를 추가 하 는 것 입 니 다.페이지 를 다시 그리 기 전에 CSS 를 먼저 처리 하도록 강제 합 니 다.다시 그리 기 전에 CSS 를 처리 하기 때문에 다시 그리 기 전에 먼저 CSS 표현 식 을 처리 합 니 다.이것 은 당신 으로 하여 금 완벽 하고 매 끄 러 운 고정 위치 요 소 를 실현 하 게 할 것 입 니 다!그리고 나 서 나 는 background - image 가 실제 그림 이 필요 없 이 about: blank 로 설정 하면 된다 는 것 을 알 게 되 었 다.
아래 에 전체 코드 를 동봉 합 니 다.

/*  IE6         */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6         */
/*   IE6  bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

이상 에서 말 한 것 이 바로 본문의 전체 내용 이 니 여러분 들 이 좋아 하 시 기 를 바 랍 니 다.