JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<p>Previous element</p>
</div>
<div class="sticky add-filter">
<p>This is a sticky element</p>
</div>
<div class="container add-filter">
<p>This is the container</p>
</div>
CSS
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.sticky {
display: block;
position: fixed;
top: 0px;
left:0px;
}
.add-filter {
-webkit-filter: sepia(10%) grayscale(60%);
-moz-filter: sepia(10%) grayscale(60%);
filter: sepia(10%) grayscale(60%);
}
div {
background-color: #ddf;
padding: 10px;
margin: 0px;
position: relative;
}
JavaScript
//const sticky = document.querySelector('.sticky');
//const container = sticky.parentElement;
//setTimeout(() => container.classList.add('add-filter'), 2000);