创建在顶部（AngularMaterial2）

过去几次有我有一个应用程序在那里我有很多的导航选项，其中量超过sidenav的高度的sidenav固定搜索栏一sidenav。创建在顶部（AngularMaterial2）

为了帮助用户体验，我希望在sidenav的顶部包含一个文本框，该文本框将固定在顶部，即使导航栏向下滚动也不会移动。

我只成功把文本框的sidenav内，但没有把它固定在上面。

我试过使用CSS来处理它，要么使用position: fixed要么使用position: absolute，还有很多事情我忘记了，但都没有成功。我已经将它定位在我想要的位置，但背景消失了，并且它不在实际的sidenav内发生，因为导航链接出现在文本框后面。

我还没有看到其他网站类似的方法，所以我还没有一个地方，采取从例子。
基础知识在https://material.angular.io/如图所示，除了应该在上面的文本框，以帮助在导航栏过滤器链接。

来源

2017-04-14 Giora Guttsait

试试这个https://medium.com/@MikkelDamm/sticky-header-in-angular2-90364eba81d9 –

我不能确定你真正想要的...但我认为这是一个伟大的地方，尝试和使用的技术，最近，我跑过。您可以使用transform: translate(x,x)为fixed定位创建新的上下文。通常fixed会尊重主体，因为它是非常好的 - 但对元素使用翻译似乎会创建它自己的用于固定位置的子范围。

.parent { 
    transform: translate(0,0); 
} 

.parent .form { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.parent .sidebar-module-list { 
    padding-top: {{formHeight}}; 
}

Here is an example CodePen

来源

2017-04-14 22:02:15 sheriffderek

创建在顶部（AngularMaterial2）

回答

相关问题