상단에 고정 검색 막대가있는 sidenav 만들기 (AngularMaterial2)

Question

과거에는 몇 번이나 sidenav의 높이를 초과하는 탐색 옵션이있는 sidenav가있는 앱을 여러 번 만들었습니다.

UX 부분을 돕기 위해 sidenav 상단에 텍스트 상자를 포함하고 싶습니다.이 텍스트 상자는 상단에 고정되어 있으며 navbar가 아래로 스크롤 되어도 움직이지 않습니다.

나는 sidenav 안에 텍스트 상자를 넣는 데 성공했지만 상단에 고정시키지 않았습니다.

나는 CSS를 사용하여 접근하려했는데, position: fixed 또는 position: absolute과 내가 잊어 버린 많은 것들이 있지만 아무도 작동하지 못했습니다. 내가 원하는 위치에 위치를 관리했지만 백그라운드가 사라졌으며 탐색 링크가 텍스트 상자 뒤에 표시되므로 실제 sidenav 내부에서 발생하지 않습니다.

나는 다른 사이트에서 비슷한 접근법을 보지 못했기 때문에 예제를 취할 곳이 없었습니다.
기본 사항은 https://material.angular.io/입니다 (단, 상단에 텍스트 상자가 있어야 함).

Answer 1

나는 당신이 정말로 원하는 것을 확신 할 수 없다. 그러나 나는 이것이 내가 최근에 만났던 기술을 시도하고 사용하기에 좋은 장소라고 생각한다. transform: translate(x,x)을 사용하여 fixed 위치 지정을위한 새 컨텍스트를 만들 수 있습니다. 일반적으로 fixed은 본체를과 같이 존중합니다.하지만 요소에 대해 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