2013-06-20 6 views
24

W jQuery, w jaki sposób można znaleźć położenie przesunięcia względem określonego kontenera?jQuery Uzyskaj przesunięcie górne w stosunku do konkretnego elementu div

Na przykład, masz to:

<body style="padding:20px"> 
<div id="top-container" style="margin-top:20px"> 
    <div id="one-level-container" style="margin-top:70px"> 
     <div id="two-level-container" style="margin-top:120px"> 
      <div id="ELEMENT" style="margin-top:10px"> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 

(padding i margin-top są właśnie tam na przykładach.)

Jak można sprawdzić najwyższej pozycji #ELEMENT do # top-container?

Próbowałem już używać przesunięcia i pozycji jQuery, ale te wydają się nie mieć poprawnego przesunięcia, którego szukam.

Odpowiedz

42

Zastosowanie $.offset() np

alert($("#ELEMENT").offset().top - $("#top-container").offset().top)
body { 
 
    background: blue 
 
} 
 

 
div { 
 
    padding: 20px 
 
} 
 

 
#top-container { 
 
    background: green 
 
} 
 

 
#one-level-container { 
 
    background: red 
 
} 
 

 
#two-level-container { 
 
    background: black 
 
} 
 

 
#ELEMENT { 
 
    background: orange 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<body style="padding:20px"> 
 
<div id="top-container" style="margin-top:20px"> 
 
    <div id="one-level-container" style="margin-top:70px"> 
 
     <div id="two-level-container" style="margin-top:120px"> 
 
      <div id="ELEMENT" style="margin-top:10px"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body>

+1

Działa idealnie, dziękuję! :) –

+0

Doskonały pomysł! Weel wykonał – Polaris

+0

to działa dla mnie ... dzięki – Rajaraman