javascript - La hauteur de déplacement de .offset().top est-elle par rapport au corps ou à .leftmenu_main li? ? ?

Question

$(".leftmenu_main li").hover(function () {
    $(this).addClass('hover');
    var menuTop = $(this).offset().top;
    
    var itemsList = $(this).children(".sec_cd");
    var itemsCount = itemsList.find('.sec_icon').length;

    itemsList.css("top", subMenuTop).fadeIn("fast");
}, function () {
    $(".sec_cd").hide();
    $(this).removeClass('hover');
});

Answer 1

Donnez-moi une châtaigne

Donc, offset ne calcule pas la hauteur du parent, mais les marges supérieure et gauche du corps.

Answer 2

html

    <p class="a">
        <p class="b"></p>
    </p>

css

        .a{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #f33;
            top: 200px;
        }
        .b{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #1abc9c;
            top: 120px;
        }

js

console.log($('.b').offset().top);

offset().top est le résultat final de 层层向上par rapport au corps
Notez qu'il est ascendant couche par couche, peu importe le nombre de parents positionnés au milieu ou le nombre de décalages supérieurs au milieu. , ils seront superposés.

Cela peut également être réalisé avec du JS natif :

export function getTop(obj) {
  var iTop = 0;
  while (obj != window.document.body && obj != null) {
    iTop += obj.offsetTop; //循环取每一层父元素的相对偏移量
    obj = obj.offsetParent; //设置当前元素的父元素=当前元素，用以获取再上层的offsetTop
  }
  return iTop;
}

Answer 3

Cela dépend si vous avez écrit le parent positionnement. S'il n'y a pas de parent positionnement, c'est le corps

.

Answer 4

为什么不查 API。

Obtenez les coordonnées actuelles du premier élément de l'ensemble des éléments correspondants, par rapport au document.