Есть такая структура (li:inline-block;
при ресайзе перестраиваются друг под друга):
$('.on').click(function(){
var that = $(this),
item = $('.item'),
itemNum = that.data('item');
console.log(item.offset().top+ item.outerHeight(true));
item.filter('.item__'+itemNum).css({
'top': item.offset().top+ item.outerHeight(true) - $(window).scrollTop()
});
item.filter('.item__'+itemNum)
.addClass('open')
.siblings()
.removeClass('open');
$(window).resize(function() {
console.log(item.offset().top+ item.outerHeight(true));
item.filter('.item_'+itemNum).css({
'top': item.offset().top+ item.outerHeight(true) - $(window).scrollTop()
});
});
});
i {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
ul li {
display: inline-block;
}
.wrap {
position: relative;
}
.item {
position: absolute;
left: 0;
right: 0;
height: 200px;
background: #000;
display: none;
}
.item.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrap">
<ul>
<li class="on" data-item = "item-1"><i></i></li>
<li class="on" data-item = "item-2"><i></i></li>
<li class="on" data-item = "item-3"><i></i></li>
<li class="on" data-item = "item-4"><i></i></li>
<li class="on" data-item = "item-5"><i></i></li>
</ul>
<ul>
<li class="item item__item-1">
<span></span>
</li>
</ul>
</div>
Нужно чтобы соответствующие лишкам блоки item__item-1\2\3
... принимали соответствующее положение top
li.on height (блок под лишкой).
В моем рабочем варианте, почему-то offset().top какие-то непонятные значения и всегда разные выдает. Если использовать position: fixed то все отлично, но как абсолют так все ломается!
Может быть кто-то подскажет что не так в коде.