Tirant

So basically, I have my sticky navbar working with a working dropdown inside. My problem: when I scroll down and the sticky class is activated, the dropdown stops working. So how can I fix that?

This is the code I have over there

<div class="navtop">
	<div class="dropdown-user">
		<div class="dropbtn"><img src="images/user.png" alt="Perfil de Usuario" width="20px"><span>'.$_SESSION["username"].'&nbsp;&nbsp;<i class="fa fa-angle-down"></i></span></div>
		<div class="dropdown-user-content" id="dropdown-user-content">
			<a href="perfil.php"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a>
            <a href="mensajes.php"><i class="fa fa-fw fa-envelope"></i> Mensajes</a>
            <a href="reglas.php"><i class="fa fa-fw fa-book"></i> Reglas</a>
            <a href="resumen.php?logout=1" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a>
		</div>
  	</div>
</div>

<style>
.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}

.navtop {
    width: 100%;
    background-color: #000;
    overflow: hidden;  
    color: #fff;
    font-size: 12px;
}

.dropdown-user {
    float: right;
    overflow: hidden;
}

.dropdown-user:hover {
    background: darkgrey;
    cursor: pointer;
}

.dropdown-user .dropbtn {
    outline: none;
    height: 31px;
    background-color: inherit;
    font-family: inherit;
}

.dropdown-user img {
    float: left;
    margin: 5px 4px 0px 5px;   
}

.dropdown-user span {
    float: left;
    padding: 8px 8px 8px 0px;
}
      
.dropdown-user-content {
    display: none;
    right: 0;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
.dropdown-user-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
  
.dropdown-user-content a:hover {
    background-color: #ddd;
}
  
.dropdown-user:hover .dropdown-user-content {
    display: block;
}
</style

Thanks in advance!