2010-08-05 5 views
0

Internet Explorer 6 및 FF에서 jQuery에서 구현하려고하는 것과 관련하여 문제가 있습니다. 기본적으로 $ (window) .scrollTop() 속성을 방해하는 플로팅 된 내용을 사용하는 페이지 맨 위에 개체가 있습니다.jQuery가 화면 위쪽에 요소를 놓을 때 마진 맨 위로 이동해야합니다.

$ (window) .scrollTop()이 스크롤하여 숨겨진 공백을 반환한다는 것이 내 이해 (그리고 틀렸다면 제게 올바른 방법을 알려주세요.) 나는 부유 한 콘텐츠없이 몇 가지 테스트를 수행했으며,이 작업을 지원하는 것 같습니다.

$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header? 
      var $myDiv = $("#scrollingDiv"); 
      if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it 
       $myDiv.show(); 
      } 
      $myDiv.stop(); 
      $myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT! 
     } 
     else { //otherwise hide it, since the header is visible 
      $("#scrollingDiv").hide(); 
     } 
    }); 
}); 

이 그래서

<HTML> 
<HEAD> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 180) { 
      var $myDiv = $("#scrollingDiv"); 
      if ($myDiv.is(":hidden")) { 
       $myDiv.show(); 
          } 
      $myDiv.stop(); 
      $myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); 
     } 
     else { 
      $("#scrollingDiv").hide(); 
     } 
    }); 
}); 
</script> 
<style type="text/css"> 
<!-- Enter any CSS to make objects viewable here --> 
#scrollingDiv 
{ 
    width: 100%; 
    position: absolute; 
    margin-top: 0px; 
} 
</style> 
</HEAD> 
<BODY> 
<!-- Enter in test elements here --> 
<div style="overflow: auto;"> 
    <div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;"> 
     CONTENT<br /><br /> 
    </div> 
</div> 
<div id="scrollingDiv" style="background-color: #000; color: #FFF;"> 
    Scrolling floating div of doom 
</div> 
<div style="height: 180px; border: solid 1px #000;"> 
    *Highlight the 180 px scroll area* 
</div> 
<div style="height: 10000px;"> 

</div> 
</BODY> 
</HTML> 

(제대로 작동 보려면 아래 div에 그냥 "evilFloatomoton을"주석) 오류를 표시하는 HTML 문서입니다 :

내 코드입니다 내가 생각한 것처럼 상단 모서리에 대항하는 대신 내 테스트에서 페이지의 중간에 있습니다. 누구든지 나를 도울 수 있습니까?

답변

1

scrollingDiv 컨테이너의 경우 스타일을 위치 : 절대 및 상단 : 0px로 설정하십시오. 그것은 한 자리에서 귀하의 부동 div 유지해야합니다.

관련 문제