스크롤 사업부의 고정과 함께. 코드는 jquery how to position one element relative to another 을 기반으로하지만 코드가 예상대로 작동하지 않습니다. 절대 위치 지정 (예 : 헤더의 빼기 옵셋)에 따라 오프셋을 재배치하는 방법을 알아낼 수 있습니다. 하지만 내가 가지고있는 문제는 스크롤 포지셔닝이다. 스크롤을 시작하자마자 위치가 잘못되었습니다. 누군가 그것의 해결책을 알고 있습니까?이상 마우스 서로 옆에 jQuery를 위치 요소 - 그래서 결과가 바람직하지이 <a href="http://jsfiddle.net/YpcSe/1/" rel="nofollow noreferrer">jsFiddle of mouseover together with absolute positioning divs</a></p> <p>와 바이올린을
내 자신의 질문에 대답하기 싫어하지만 여기 참조 : working solution with jquery
기본적으로 문제는 요소가 잘못된 위치에 삽입되었다는 것입니다. 오프셋은 스크롤바가있는 페이지와 어떻게 든 관련이 없습니다. 부모 폼에 요소를 추가하여이 문제를 해결할 수 있습니다 (예를 들어 일부 단추를 표시하려는 경우). 또는 <body>
필자가 겹쳐진 요소의 문제를 해결합니다. 고정 위치 요소 E1과 절대 위치 요소 E2가 있다고 가정 해보십시오. 하나는 왼쪽 메뉴이고, E2는 내용입니다. 예를 들어 마우스 오버 할 때 요소 표시/표시를 원할 때 div를 E2 콘텐츠에 포함시키고 왼쪽 메뉴 E1에서 겹쳐지기를 원하면 div가 콘텐츠에 없다는 것을 확인해야합니다. 고정되어있는 E2의 형제와 겹칠 수 없기 때문입니다.
문서를 스크롤 할 때 어떤 이유로 인해 offset().top 값이 jQuery에서 변경됩니다. 대신, 단순히 표준 HTML 요소의 속성을 사용 offsetLeft 및 offsetTop :
근무 예 : http://jsfiddle.net/YpcSe/2/
코드 :
$("#m1").mouseover(function(){
$("#o1").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout(function(){
$("#o1").hide();
});
$("#m2").mouseover(function(){
$("#o2").css({ "left": this.offsetLeft, "top":this.offsetTop }).show();
})
.mouseout(function(){
$("#o2").hide();
});
그런데 이런 예는 jQuery가 실제로 필요할 때 (예 : jquery의 오프셋 기능 대신 offsetLeft 사용) 언제든지 반영 할 수있는 좋은 기회입니다. 또 다른 예는 $ (this) .attr ('class') 대신 this.className을 사용하는 것입니다 ... – maxedison
나 자신을 바로 잡아야합니다. 이것이 작동하지 않습니다. 평범한 예전의 javascript offsetTop 함수는 좀 더 복잡한 웹 페이지에서 사용할 때 다른 상위 요소와 관련된 완전히 잘못된 위치를 제공합니다. – Toskan
그런 다음 코드를 게시하거나이를 보여주는 바이올린을 만드십시오. – maxedison
참조한 원래 질문에 대한 답변을 업데이트했습니다. 이제 귀하의 사례도 처리됩니다. :) – Jacob