我的css固定菜单工作正常,固定在容器的顶部,设置为相对位置,但是当用户点击导航链接时,会打开一个也设置为固定的非画布导航,但它会生成原始菜单失去了固定的位置。
您的想法是,您可以在页面的任何位置打开菜单,仍然可以看到标题。有人可以帮忙!
页面的基本代码在这里 -
<div id="container">
<div id="content">
<div id="header" class="clearfix">
<a href="#" class="nav-trigger">Menu</a>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur totam debitis porro repudiandae accusantium consequatur, reprehenderit enim et eos dolor, dignissimos esse! Reiciendis libero sunt, id quibusdam, harum blanditiis provident?</p>
</div>
</div> <!-- /#content -->
<div id="menu">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!-- /#menu -->
</div> <!-- /#container -->
基本的CSS在这里:
#header{
position:fixed;
top:0;
right: 0;
z-index:999;
width: 100%;
height:60px;
background: yellow;
padding-top: 40px;
padding-right:40px;
text-align:right;
}
#container{
overflow:hidden;
position:relative;
min-width: 320px;
}
#content{
position:relative;
}
.menu-open #content{
transform: translate3d(-300px,0,0);
}
#menu{
position:fixed;
top:0;
right:0;
height:100%;
width:300px;
z-index:999;
background: $menu-dark-blue;
transform: translate3d(100%,0,0);
}
.menu-open #menu{
transform: translate3d(0,0,0);
}
小提琴在这里:
答案 0 :(得分:2)
这是因为定位是相对于它内部的元素。 #container
有position: relative
,#header
有position: fixed
,因此标题已固定在容器的顶部(并向上滚动),而不是页面,如你想要的。
我在您的HTML中将#header
移出了#container
,并在CSS中添加了这一行:
.menu-open #header {
transform: translate(-300px, 0);
}
我删除了所有position: relative
个属性。在这种情况下不需要它们。默认情况下,所有元素都设置为position: static
。
position: relative
。
为了以防万一,我还将translate3d
更改为translate
。有时translate3d
可能会在您放置东西时弄乱东西。