아이폰 사파리브라우저에서 position:fixed 구현하기

css에서 사용가능한 속성중

position:fixed가 아이폰용 사파리 브라우저에서는 아쉽게도 동작을 하지 않습니다.

jquery나, YUI 프레임워크를 사용해서 비슷한 효과를 구현할수도 있지만,

native javascript를 이용하여 가장 간단하게 position:fixed 효과를 낼수 있는 자바스크립트를 만들어봤습니다.


<script type="text/javascript">
window.onscroll = function() {
  document.getElementById('word_index').style.top =
     window.pageYOffset + 'px';
};
</script>


이 스크립트도 완벽하게 position fixed효과나 나오지는 않습니다.

아이폰에서 스크롤링을 시도하면, 스크롤링이 다 끝날때 해당 엘리먼트가 position 위치를 변경하기 때문에

스크롤링이 되는 동안에 스크롤을 따라움직이게끔은 좀 더 많은 수고와 노력이 필요합니다.


간단하게 구현하시려는 분들은 요정도 사용해도 무리는 없을것 같네요.