固定位置菜单在作为 iframe 中包含的内容时不起作用

Question

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

我对学习 Web 开发非常陌生，所以我唯一尝试过的就是在没有 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;
}