Firefox 및 Chrome에서 고정 플로팅 요소 스크롤을 원활하게 만들기

Question

jQuery와 CSS를 사용하여 스크롤 할 때 페이지 상단에 무언가를 배치하는 스크립트가 있습니다. 그러나 막대는 스크롤 할 때 흔들리는 것처럼 보이며 Chrome 및 Mozilla Firefox에서 브라우저 상단에 고정되었습니다. 왜 이럴 수 있니?

내가 설명하려고하는 것을 이해할 수 있기를 바랍니다. 그렇지 않다면, 복사 무슨 뜻인지 확인하기 위해 jQuery 라이브러리와 함께이 코드를 붙여 넣습니다

<style type='text/css'> 
body { 
    height:1000px; 
    margin:0; 
    padding:0; 
} 

#scroller { 
    position:relative; 
    top:60px; 
    width:100%; 
    background:#CCC; 
    height:20px; 
} 
</style> 

<script type='text/javascript'> 
    $(window).load(function() { 
     $(window).scroll(function() { 
      if($(window).scrollTop()>60) { 
       $('#scroller').css('top', $(window).scrollTop()); 
      } 
     }); 
    }); 
</script> 

<div id="scroller">Some controls</div> 

Answer 1

사용이 : 오히려 상단 모든 시간을 조작하는 것보다

$(window).load(function(){ 
    $(window).scroll(function(){ 
     if($(window).scrollTop()>60){ 
      $('#scroller').css('position', 'fixed'); 
      $('#scroller').css('top', 0); 
     } else { 
      $('#scroller').css('position', 'relative'); 
      $('#scroller').css('top', 60); 
     } 
    }); 
}); 

을, 일단 고정 된 "위치"에서 "고정 된"상태로 유지되고 0으로 가기를 원하면, 자바 스크립트 스크롤 이벤트가 위치를 고정하기를 기다릴 필요가 없습니다.

Answer 2

이 작업을 처리하는 jquery 플러그인도 있습니다. 다음은 배너를 보지 못하게 밀어 넣은 후 페이지 상단에서 멈추는 데모 데모입니다. 예를 들어 배너가없는 것처럼 가장합니다.

데모 : http://jsfiddle.net/ZczEt/

편집 : 업데이트 바이올린 : http://jsfiddle.net/ZczEt/2180/

사용법 :

$(document).ready(function() { 
    $('.header').scrollToFixed(); 
}); 

다음과 같이 플러그인에 대한 설명은 다음과 같습니다

이 플러그인은 요소를 해결하는 데 사용됩니다 요소가 화면 밖으로 스크롤 된 경우 페이지 맨 위로 이동합니다. 그러나 요소가 수평 스크롤을 사용하여 왼쪽 또는 오른쪽으로 계속 이동할 수 있습니다.

marginTop 옵션을 지정하면 수직 스크롤이 목표 위치에 도달하면 요소가 수직 위로 이동을 멈 춥니 다. 하지만 페이지가 왼쪽이나 오른쪽으로 스크롤 될 때 요소는 여전히 수평으로 이동합니다. 페이지가 대상 위치를지나 뒤로 스크롤되면 요소는 페이지의 원래 위치로 복원됩니다.

이 플러그인은 Firefox 3/4, Google Chrome 10/11, Safari 5 및 Internet Explorer 8/9에서 테스트되었습니다.

플러그인 소스 : 여기 https://github.com/bigspotteddog/ScrollToFixed