Change Opacity of an element after page scroll

there is a header in my website, it is transparent when user is at the top of website, but I want to change it's opacity to 50% when the user scrolls until a certain height of the page, HOW DO I DO IT ?

.navbar_outline{
    background-color: yellow;
    border-radius: 50px;
    top: 10px;
    width: 1300px;
    height: 70px;
    position: absolute;
    position: fixed;
    margin-left: 35px;
    opacity: 50%;
}