Динамическое изменение высоты блока ⇐ Html

[Anonymous]

Я использую код, который скрывает содержимое и отображает кнопку при прокрутке страницы на 50 пикселей вниз. При нажатии на кнопку открывается тот же контент, а при повторном нажатии он скрывается.
Вот демо моего кода: Jsfiddle
Вы можете видеть, что когда вы скрываете контент и перемещаете кнопку вверх, высота блока не меняется. Как я могу динамически изменять высоту блока при перемещении кнопки?
Если мне нужно изменить способ перемещения кнопки вверх/вниз вместе с динамическим изменением высоты блока, не могли бы вы предложить более правильное решение?
P.S. Строка в моем html-коде предназначена только для демонстрационных целей. Эта строка не появится в рабочем коде, поэтому ее можно игнорировать.

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function () {
const contentBlock = document.querySelector('.content');
const toggleButton = document.querySelector('.toggle-button');

// Click handler for a button to toggle visibility
function toggleVisibility() {
if (contentBlock.classList.contains('hidden-content')) {
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
toggleButton.textContent = 'Hide'; // Content is now shown
updateToggleButtonState(true); // Show the button
} else {
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
toggleButton.textContent = 'Show'; // Content is now hidden
updateToggleButtonState(false); // Hiding the button
}
}

// Switching button states when block visibility changes
function updateToggleButtonState(show) {
if (show) {
toggleButton.classList.add('slide-down');
setTimeout(() => {
toggleButton.classList.remove('slide-up');
}, 0);
} else {
toggleButton.classList.add('slide-up');
setTimeout(() => {
toggleButton.classList.remove('slide-down');
}, 0);
}
}

// Handling the page scroll event
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
toggleButton.style.display = 'block';
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
toggleButton.textContent = 'Show'; // Content is hidden
updateToggleButtonState(false); // The button should move up.
} else {
toggleButton.style.display = 'none';
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
toggleButton.textContent = 'Hide'; // Content is shown
updateToggleButtonState(true); // The button should move down
}
});

// Registering a button click event
toggleButton.addEventListener('click', () => {
toggleVisibility();
});
});

Код: Выделить всё

.sticky-category {
position: sticky;
top: 20px;
height: auto;
z-index: 999;
background-color: #ccc;
transition: all .2s ease-in-out;
}
.content {
transition: opacity 0.5s ease-in-out;
}
.toggle-button {
display: none;
max-width: 200px;
margin: 0 auto;
padding: 10px;
background-color: rgb(191,79,203);
border-radius: 50px;
border: none;
cursor: pointer;
color: #fff;
}
.toggle-button:hover {
background-color: rgb(143,62,184);
}
.hidden-content {
opacity: 0;
visibility: hidden;
}
.show-content {
opacity: 1;
visibility: visible;
}
.toggle-button.slide-up {
transform: translateY(-70px);
}
.toggle-button.slide-down {
transform: translateY(0);
}

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in felis in felis placerat pulvinar. Sed eget fermentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque placerat condimentum laoreet. Mauris facilisis mi tellus, a blandit magna viverra in. Aenean varius pretium elit vitae finibus. Fusce vel cursus tellus, non sollicitudin mi.
Show

Подробнее здесь: https://stackoverflow.com/questions/798 ... ock-height