这个菜单需要包含在带有 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é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
最佳答案
改变标题的位置
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;
}
关于css - 固定位置菜单在包含在 iframe 中时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57566095/