Schaltflächenanimation beim Ein-/Ausblenden ⇐ CSS

[Anonymous]

Ich verwende Code, der Inhalte verbirgt und eine Schaltfläche anzeigt, wenn die Seite um 250 Pixel nach unten gescrollt wird. Wenn Sie auf die Schaltfläche klicken, wird derselbe Inhalt angezeigt, und wenn Sie erneut darauf klicken, wird er ausgeblendet.
Alles scheint wie erwartet zu funktionieren, aber es gibt ein Problem. Die Schaltfläche erscheint am unteren Rand des Blocks und darüber ist viel leerer Raum, wo der Inhalt sein sollte.
Update:
Wie kann ich eine Schiebeanimation erstellen, sodass sich die Schaltfläche nach oben bewegt, wenn der Inhalt ausgeblendet ist, und wenn der Inhalt angezeigt wird, nach unten?
Hier ist eine genaue Demo meines Codes:
Jsfiddle

Code: Select all

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');
}
});
});

Code: Select all

.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;
}

Code: Select all

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