Анимация кнопок при показе/скрытии ⇐ Html

[Anonymous]

Я использую код, который скрывает содержимое и отображает кнопку при прокрутке страницы на 250 пикселей вниз. При нажатии на кнопку открывается тот же контент, при повторном нажатии он скрывается.
Кажется, все работает как положено, но есть одна проблема. Кнопка появляется в нижней части блока, а над ней много пустого места, где должно быть содержимое.
Обновление:
Как создать скользящую анимацию, чтобы при скрытом содержимом кнопка перемещалась вверх, а когда содержимое отображается, кнопка перемещалась вниз?

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

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

// Manually switching the visibility of a block (by clicking a button)
function toggleVisibility() {
if (contentBlock.classList.contains('hidden-content')) {
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
} else {
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
}
}

// Button click event handler
toggleButton.addEventListener('click', () => {
toggleVisibility();
});

// Handling browser window scrolling
window.addEventListener('scroll', () => {
if (window.scrollY > 50) { // If you scrolled down the page by 50px
toggleButton.style.display = 'block'; // The appearance of the button
contentBlock.classList.remove('show-content'); // The content block is hidden
contentBlock.classList.add('hidden-content');
} else { // If you scrolled back up
toggleButton.style.display = 'none'; // The button is hidden
contentBlock.classList.remove('hidden-content'); // The content block appears again
contentBlock.classList.add('show-content');
}
});
});

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

.sticky-category {
position: sticky;
top: 10px;
z-index: 999;
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;
transition: all 0.3s ease;
color: #fff;
}

.toggle-button:hover {
background-color: rgb(143, 62, 184);
}

.hidden-content {
opacity: 0;
visibility: hidden;
}

.show-content {
opacity: 1;
visibility: visible;
}

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

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/Hide

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