css - 固定位置菜单在包含在 iframe 中时不起作用

Question

这个菜单需要包含在带有 iframe 的网页中。当它不是 include 但通过 iframe 加载时，它工作得很好，菜单的固定位置不起作用。有人可以帮帮我吗？

我是学习网络开发的新手，所以我唯一尝试过的就是在没有 iframe 的情况下直接在页面上加载菜单。它保持固定在顶部。我在 Google 和 StackOverflow 中搜索过，但没有找到答案。

这是菜单的 html:

<header class="header_area">
    <div class="main_menu">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <div class="container">


                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
                        <ul class="nav navbar-nav menu_nav ml-auto">
                            <li class="nav-item"><a class="nav-link mn_home" href="">Home</a></li>
                            <li class="nav-item"><a class="nav-link mn_projects" href="">Projects</a></li>
                            <li class="nav-item"><a class="nav-link mn_about" href="">About</a></li>
                            <li class="nav-item"><a class="nav-link mn_communiques" href="">Communiqu&eacute;s</a></li>
                            <li class="nav-item"><a class="nav-link mn_donate" href="">Donate</a></li>
                            <li class="nav-item submenu dropdown">
                                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Languages</a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item  mn_english"><a class="nav-link" href="">English</a></li>
                                    <li class="nav-item"><a class="nav-link" href="">Spanish</a></li>
                                </ul>
                            </li>
                            <li class="nav-item"><a class="nav-link mn_contact" href="">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</header>

这是通过 iframe 加载菜单时不起作用的 css:

.header_area.navbar_fixed .main_menu {
    position: fixed;
    width: 100%;
    top: -70px;
    left: 0;
    right: 0;
    background: #222222;
    transform: translateY(70px);
    transition: transform 500ms ease, background 500ms ease;
    -webkit-transition: transform 500ms ease, background 500ms ease;
    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); }

向下滚动时，菜单应保持在顶部，但通过 iframe 加载时，它只会随页面一起上升。这是演示:http://project-smac.orgfree.com

Answer 1

改变标题的位置position:absolute 到 position:fixed

.header_area {
    position: fixed;  /*change this */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99990;
    transition: background 0.4s, all 0.3s linear;
}