Question

过去有好几次我有一个应用程序，我有一个带有很多导航选项的sidenav，其数量超过了sidenav的高度。

为了帮助UX部分，我想在sidenav的顶部添加一个文本框，它将固定在顶部，即使导航栏向下滚动也不会移动。

我只是成功地将文本框放在sidenav中，但没有将它固定在顶部。

我尝试使用CSS来处理它，使用position: fixed或position: absolute，以及我已经遗忘的很多东西，但没有一个有效。我已经把它定位在我想要的地方，但是背景已经消失了，并且它没有在实际的sidenav中发生，因为导航链接出现在文本框的后面。

我没有在其他网站上看到类似的方法，所以我没有地方可以举例基本内容如https://material.angular.io/所示，但顶部应该有一个文本框，以帮助过滤导航栏中的链接。

Answer 1

我无法确定你真正想要的......但我认为这是一个尝试使用我最近遇到的技术的好地方。您可以使用transform: translate(x,x)为fixed定位创建新的上下文。通常fixed会尊重 body ，因为它是boundery - 但在元素上使用translate似乎可以创建它自己的固定定位子范围。

.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

在顶部创建一个带有固定搜索栏的sidenav（AngularMaterial2）

1 个答案: