When scroll, dont move width screen ( position: fixed; )

I have a <h1> over a image with a gradient overlay. To put the text over that, I used a position: fixed;

But when I scroll it moves with the screen, but I want it to stay at the place I put it. I hope I explained it well.

Does anyone have an idea?

Image CSS:

.pt-page-header__image {
    max-width: 100%;
}

.pt-gradient-overlay {
    position: relative;
    float: right;
    margin-top: -60px;
    max-width: 900px;
    max-height: 400px;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-image: linear-gradient(to right , $brand-2-color, transparent);
    }
}

Text CSS:

.pt-page-header__wrapper__content {
            max-width: 600px;
            position: fixed;
        }

HTML:

<div class="pt-gradient-overlay">
        <img src="https://scu.mb.ca/SCU/media/Images/Content%20Images/content-checking-account.jpg" alt="placeholder" class="pt-page-header__image">
    </div>
<div class="pt-page-header__wrapper__content">
    <h1 class="pt-page-header__title">test</h1>
</div>