Jquery/Javascript - 페이지 화면 또는 요소의 위치 캡처

body 또는 html 태그에 상대적인 DIV 위치를 가져와야합니다. 그래서 예를 들면Jquery/Javascript - 페이지 화면 또는 요소의 위치 캡처
는 :
나는 화면을가는 요소가 있습니다.
페이지를 세로로 스크롤하고 DIV가 화면의 특정 높이에 있으면 색상이 바뀝니다.
DIV가 화면에서 꺼지면 정상적인 색으로 바뀝니다.
나는이 비슷한 일을했다,하지만 난 그것을 위해 이전/다음 버튼을 사용할 수 있습니다 :이 작업을 수행 할 수있는 방법이
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 

    var number = 0; 
    var goSign = ""; 

    function goToByScroll(id){    
      $('html,body').animate({scrollTop: $("#"+id).offset().top-100},'slow','swing', function() 
      { 
       $('#'+id).css('background', '#8b00cb'); 
       $('#'+(id-1)).css('background', 'none'); 
       $('#'+(id+1)).css('background', 'none');  
      });    


    } 

    function iterate(goSign) 
    {        
     if(goSign == "next") 
     {   

      if(number < 12 && number >= 0) 
      { 
       goToByScroll(++number); 
      } 
      //alert(number); 
     } 
     else if(goSign == "previous") 
     { 
      if(number <= 12 && number >= 1) 
      { 
       goToByScroll(--number); 
      }    
      //alert(number); 
     } 
    } 

    </script> 


</head> 
<body> 

<div style = "position:fixed; top:90px;right:200px;width:200px;height:50px"> 
    <a href="javascript:void(0)" onClick="iterate('next')">Next</a><br/> 
    <a href="javascript:void(0)" onClick="iterate('previous')">Previous</a> 
</div> 


<div style="width:600px"> 
    <div id="1"> 
    <h1>1</h1> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="2"> 
    <h1>2</h1> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="3"> 
    <h1>3</h1> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="4"> 
    <h1>4</h1> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="5"> 
    <h1>1</h1> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="6"> 
    <h1>2</h1> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="7"> 
    <h1>3</h1> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="8"> 
    <h1>4</h1> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="9"> 
    <h1>1</h1> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="10"> 
    <h1>2</h1> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="11"> 
    <h1>3</h1> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
    <div id="12"> 
    <h1>4</h1> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div> 
</div> 
</body>
있습니까?
요소는 절대 위치 요소 내에있는 경우 내가 jQuery를의 .position()를 사용하여 생각하고 있었는데
http://api.jquery.com/position/
출처
2012-02-09 Kalvin Klien
.position() 당신에게 그것을 기반으로 요소의 위치 오프셋의 부모를 줄 것이다 (그래서 당신은 아마받지 않습니다 document 요소의 좌표). 대신 .offset()를 사용
보십시오
문서에 대하여 정합 요소들의 세트의 첫 번째 요소의 현재 좌표를 취득.
출처 : 여기에 http://api.jquery.com/offset
데모입니다 :
출처
2012-02-09 23:40:43 Jasper
hmmm..interesting : http://jsfiddle.net/PNCbK/ (http://jsbin.com/ezobux/edit#javascript,html,live JSFiddle 지금 문제가있는 것 같다, 여기에 동일한 코드의 JSBin이다). 아픈 내 애플 리케이션을 계속 작동합니다. 감사. 나중에 결과를 게시하겠습니다. –
Jquery/Javascript - 페이지 화면 또는 요소의 위치 캡처

답변

관련 문제
