Make header transition smoother when scrolling up - html

Question

I created a header, added a scroll-up effect, and changed its color. So it is transparent when on top, hidden when scrolling down and white & sticky when scrolling up.
What I want to achieve is a smoother transition from white to top transparent when scrolling up. Tried to add transition CSS variations, but not working.
Here is how it looks when scrolling to the top. the white turns transparent instantly. I want to add a smoother transition.
Any suggestions? Here is the code that I added to make it sticky:
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#transparentsticky').addClass('headerup');
} else {
$('#transparentsticky').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });
#transparentsticky{
-webkit-transition: margin 0.3s ease;
transition : margin 0.9s ease-in-out;
}
.headerup{
margin-top: -150px !important; /*adjust this value to the height of your header*/
}
I also added this code to the Header section which adds the white transition ( white header appearing) Maybe something can be added here to make it smoothly fade into transparent as well?
.elementor-sticky--effects {
background: #ffffff!important; /* change the background color here*/
transition: .3s all ease-in-out!important;
}
.elementor-sticky--effects .sticky-menu-items ul li a /* change the menu text color here*/ {
color: #fff!important;
}
.elementor-sticky--effects, .sticky-menu-items ul li a {
transition: .3s all ease-in-out;
}
/* HIDES THE DARK LOGO */
.d-logo {
display: none;
}
/* SWITCHES LOGO ON SCROLL */
.elementor-sticky--effects .d-logo {
display: inline-block;
}
.elementor-sticky--effects .l-logo {
display: none;
}
/* CHANGES THE MENU COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a {
color: #000000!important;
}
/*Change the search icon color on scroll*/
.elementor-sticky--effects .search-on-scroll i {
color: #000000!important;
}
/*Change the hamburger icon color on scroll*/
.elementor-sticky--effects .hamburgericon i {
color: #000000!important;
}
/*Change the cart icon color on scroll*/
.elementor-sticky--effects .menucart i {
color: #000000!important;
}
/* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */
.elementor-sticky--effects .sticky-menu-items ul li a {
transition: .3s all ease-in-out!important;
}
.elementor-sticky--effects {
transition: .3s all ease-in-out!important;
}
/*change color to the mobile menu toggle*/
.elementor-sticky--effects .sticky-menu-items i {
color: #000000/*add your color here*/!important;
}
/* CHANGES THE TEXT HOVER COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a:hover {
color: #3F525F/*add your color here*/!important; /* edit here to change your text color for sticky header */
}
/* CHANGES THE SEARCH HOVER COLOR ON SCROLL */
.elementor-sticky--effects .search-on-scroll i:hover {
color: #3F525F/*add your color here*/!important; /* edit here to change your text color for sticky header */
}
/* CHANGES THE HAMBURGER HOVER COLOR ON SCROLL */
.elementor-sticky--effects .hamburgericon i:hover {
color: #3F525F/*add your color here*/!important; /* edit here to change your text color for sticky header */
}
/* CHANGES THE CART HOVER COLOR ON SCROLL */
.elementor-sticky--effects .menucart i:hover {
color: #3F525F/*add your color here*/!important; /* edit here to change your text color for sticky header */
}