JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div id="test">
    <div id="block"></div>
</div>
<a href="#" id="menu">menu</a>

CSS

#block {
    background: red;
    bottom: 4%;
    height: 30px;
    position: absolute;
    width: 90%;
}
#test {
    background: #eee;
    height: 300px;
    position: relative;
}

JavaScript

var _menu = $("#menu");
var _block = $("#block");
_menu.click(function () {    
    /* Высота нашего блока */
    var bH = parseFloat($('#block').css('bottom'));
    /* Высота родителя блока, по умолчанию берем высоту окна */
    var bParentH = $(window).height();
    /* Перебираем всех родителей нашего блока (уже отсортированы по близости) */
    _block.parents().each(function() {
        /* Высота элемента родителя */
        var elementH = Math.ceil(parseFloat($(this).css('height')));
        /**
         * Интересуют только те элементы, у которых заданы:
         * - относительное позиционирование
         * - высота
         */
        if ($(this).css('position') === 'relative' && elementH > 0) {
            bParentH = elementH;
            /* Выходим из цикла */
            return false;
        }
    });
    /* Значение из inline-стилей */
    var bInlineHInPercentage = _block[0].style.bottom;
    /* Автоматически рассчитываемое значение */
    var bCalculatedHInPercentage = Math.ceil(100 * bH / bParentH) + '%';
    /* Приоритет отдаем значению из inline-стилей, если таковое есть */
    var bHInPercentage = bInlineHInPercentage || bCalculatedHInPercentage;
    if (bHInPercentage === '4%') {
        _block.animate({
            'bottom': '10%'
        }, 300);
    } else {
        _block.animate({
            'bottom': '4%'
        }, 300);
    }
});