You can add a class to the scrollable content and have two states for it: the first would be when it's visible, the second when it's hidden:
.scrolling-content {
height:500px;
transition: all 5s ease;
}
.scrolling-content.hidden {
height: 0px;
opacity: 0;
}
Of course, you'll also need to handle button clicks and add/remove the hidden class when/where appropriate:
document.addEventListener("DOMContentLoaded", function() {
const contentBlock = document.querySelector('.content');
const toggleButton = document.querySelector('.toggle-button');
const scrollingContent = document.querySelector('.scrolling-content')
// 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');
scrollingContent.classList.remove('hidden');
} else {
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
scrollingContent.classList.add('hidden');
}
}
// Button click event handler
toggleButton.addEventListener('click', () => {
toggleVisibility();
});
// Handling browser window scrolling
window.addEventListener('scroll', () => {
if (scrollingContent.classList.contains('hidden')) return;
if (window.scrollY > 150) { // If you scrolled down the page by 250px
toggleButton.style.display = 'block'; // The appearance of the button
contentBlock.classList.remove('show-content'); // The content block is hidden
contentBlock.classList.add('hidden-content');
scrollingContent.classList.add("hidden");
setTimeout(function() {
window.scroll(0, 0);
} , 1000);
} 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-block {
position: sticky;
top: 90px;
z-index: 999;
transition: all .2s ease-in-out;
height:750px;
}
.content {
transition: opacity 0.5s ease-in-out;
}
.toggle-button {
display: none;
max-width: 200px;
margin: 0 auto;
background-color: rgb(191, 79, 203);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle-button:hover {
background-color: rgb(143, 62, 184);
}
.hidden-content {
opacity: 0;
visibility: hidden;
}
.show-content {
opacity: 1;
visibility: visible;
}
.scrolling-content {
height:500px;
transition: all 5s ease;
}
.scrolling-content.hidden {
height: 0px;
opacity: 0;
}
<div class="sticky-block">
<span class="content">Content Here</span>
<div class="scrolling-content">Scrolling content</div>
<button class="toggle-button">Show/Hide</button>
</div>
EDIT
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();
contentBlock.classList.add('wait');
setTimeout(function() {contentBlock.classList.remove('wait')}, 200);
});
// Handling browser window scrolling
window.addEventListener('scroll', () => {
if (contentBlock.classList.contains("wait")) return;
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');
contentBlock.classList.add('wait');
} else { // If you scrolled back up
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 {
display: none;
}
<div class="sticky-category">
<span class="content">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.</span>
<button class="toggle-button">Show/Hide</button>
</div>
<div style="height: 500px;"></div>
