如何在静态定位的div中修复div的位置？

Question

我的问题是关于放置一个具有位置的div：固定在div中，其位置为：static。

我有几个网站，我将标题修复到窗口顶部。我也有视差效果。我使用javascript来允许我在标题中添加一个类，以便缩小并更改滚动时的不透明度。

这是javascript，layout和CSS：

$(function () {
        $("#Page").scroll(function () {
            if ($("#Page").scrollTop() > 0)
                $("#header").addClass("scrolled");
            else
                $("#header").removeClass("scrolled");
        });
    });

<div id="Page">
<div id="pre-header"></div>
<header id="header" class="">
    <div class="page-width">
        <div class="logo"></div>
        <nav class="navigation-bar"> </nav>
    </div>
</header>
</div>

#Page {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 100mm;
    perspective-origin: top right;
    position: static;
}

#header {
    padding-top: 34px;
    padding-bottom: 34px;
    background-color: rgba(255, 255, 255, 0.2);
    height: 110px;
    position: fixed;
    width: 100%;
    margin-top: 36px;
    z-index: 1;
    pointer-events: none;
    transition: background .8s;
}

我的问题是，即使在滚动页面之后，我仍然需要标题仍然位于顶部。

感谢您的帮助。