Angular 6 - CSS - липкий заголовок

Прежде чем я отвечу на ваш вопрос, вы мая примите во внимание:

• Удалите статические стили из вашего HTML.
• Используйте разумный z-index, чтобы не получить z-index чего-то вроде z-index: 100000000.
• Используйте !important только тогда, когда нет другого выбора.

Поскольку мы не можем писать код Angular через фрагменты StackOverflow, я написал код с помощью Stackblitz - https://stackblitz.com/edit/angular-ii5tnn

Чтобы сделать позицию «липкой», вы просто используете position: sticky с дополнительным правилом top или bottom (в данном случае - верхним). Например:

mat-toolbar {
  position: sticky;
  top: 50px
}

Таким образом, mat-toolbar останется на своей позиции, пока мы его не проедем.

В моем примере я сделал:

• Инициализирован новый Angular 6 и добавлен материал Angular.
• Добавлен mat-toolbar с [color = "primary"] и установлен исправлен через CSS.
• Добавлен #frugelmap с нестандартной высотой, чтобы показать это.
• Добавлен mat-toolbar с [color = "warn"] и установлены липкие правила (смотрите ниже)
• Добавленный #add-spacing с большим количеством lorem ipsum просто демонстрирует липкий эффект.

Следующие правила CSS:

mat-toolbar {
  --default-height: 50px;
}

mat-toolbar[color = "primary"] {
  top: 0;
  position: fixed;
  height: var(--default-height);
}

mat-toolbar[color = "warn"] {
  position: sticky;
  top: var(--default-height);
}

#frugalmap {
  height: 300px;
  background-color: #EEE;
}

Я не мог использовать код вашего вопроса, потому что у меня не было всего вашего кода. Итак, я написал вам пример того, что вы хотите сделать со второй панелью инструментов.

Мой код не в angular, но он имеет тот же стиль css и обработчик событий Javascript для добавления / удаления класса, чтобы закрепить вторую панель инструментов вверху. Просто замените элементы своими собственными элементами, именами классов.

Notice

• First of all, Take a look at this quesion CSS Sticky buttons div not working in IE 11.

• In some use cases, your element might have a dynamic position and height and you have to get element.clientHeight to get the position of fixing your element. In this case, you have to use JS.

что вы можете использовать t

document.addEventListener("scroll", function(){
    var secondToolbar = document.querySelector('.toolbar-2');
    var map = document.querySelector('.map');

    if ((window.pageYOffset + 50) > (map.offsetTop + map.clientHeight))
      secondToolbar.classList.add('fixed');
    else
      secondToolbar.classList.remove('fixed');
});

body {
  margin: 0;
}

*{
  box-sizing: border-box;
}

.container {
  width: 300px;
  height: 1000px;
  padding-top: 50px;
}

.toolbar-1,
.toolbar-2,
.map {
  display: block;
  width: 300px;
  color: #aaa;
  text-align: center;
  padding: 15px;
  border: 1px solid #242424;
}

.toolbar-1 {
  position: fixed;
  height: 50px;
  top: 0;
  left: 0;
  background-color: #f8f8f8;
}

.toolbar-2 {
  height: 50px;
}

.toolbar-2.fixed{
  position: fixed;
  top: 50px;
  left: 0;
}

.map {
  height: 250px;
  background-color: #f8f8f8;
}

<div class = "container">
  <div class = "toolbar-1">First Toolbar</div>
  <div class = "map">Map</div>
  <div class = "toolbar-2">Second Toolbar</div>
</div>

Чтобы избежать проблем с поддержкой position: sticky браузером, вы можете легко добиться этого, используя ngClass для переключения липкого поведения, как:

component.html

<mat-toolbar color = "primary" class = "fixed-header" >
</mat-toolbar>

<div class = "custom-popup" id = "frugalmap" ></div>

<mat-toolbar
  id = "secondToolbar" color = "warn"
  [ngClass] = "{'mat-elevation-z5' : true, 'sticky' : isSticky}">
</mat-toolbar>

используйте HostListener для отслеживания позиции прокрутки, поскольку вам не следует использовать обработчик событий JS непосредственно в Angular:

component.ts

  isSticky: boolean = false;

  @HostListener('window:scroll', ['$event'])
  checkScroll() {
    this.isSticky = window.pageYOffset >= 250;
  }

наконец, добавляем стиль для нашего пользовательского класса sticky.

component.css

.fixed-header {
  position: fixed;
  z-index:999;
  height: 50px;
}

#frugalmap {
  height: 300px;
  width: 100%;
  top: 50px;
  position: relative;
}

.mat-elevation-z5 {
  position: relative;
}

.sticky {
  position: fixed;
  top: 50px;
}

Демо Stackblitz

Поскольку другой ответ в основном полагается на CSS, который доступен не во всех браузерах, я позволю себе рекламировать свою библиотеку угловатые липкие вещи.

У него есть функция, которая называется «граничный элемент», и вы можете увидеть ее в действии по приведенной выше ссылке. То, что вы делаете, - это в основном вы нарезаете свою страницу на разделы (что обычно у вас уже есть), а затем указываете элементу быть закрепленным в границах родительского элемента.

Здесь вы можете увидеть это в действии:

<div #boundary style = "height:1000px;">
  <div #spacer></div>
  <div stickyThing [spacer] = "spacer" [boundary] = "boundary">
    I am sticky but only inside #boundary!
  </div>
</div>

Просто установите библиотеку, добавьте мой код и замените div на stickyThing с панелью инструментов mat. Вот в основном это.

npm install @w11k/angular-sticky-things