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

Question

У меня есть 3 элемента: 1 панель инструментов, 1 карта, другая панель инструментов.элементы расположены один под другим

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

Спасибо за помощь

// Component.html

<mat-toolbar color="primary" [ngStyle]="{'height':'50px'}"  class="fixed-header" >
</mat-toolbar>

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

<mat-toolbar color="warn" class="mat-elevation-z5">
</mat-toolbar>

// Component.css

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

#frugalmap {
height: 300px;
width: 100%;
margin-top:50px;
}

.mat-elevation-z5 {
position: relative;
z-index: 2;
}

Answer 1

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

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

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

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

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

npm install @w11k/angular-sticky-things

Answer 2

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

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

Уведомление

• Прежде всего, взгляните на этот вопрос CSS Sticky buttons divне работает в IE 11 .

• В некоторых случаях ваш элемент может иметь динамическую позицию и высоту, и вам нужно получить element.clientHeight, чтобы получить положение фиксации вашегоэлемент.В этом случае вы должны использовать 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>

Answer 3

Чтобы избежать проблем поддержки браузером 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>

usign 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 Demo

Answer 4

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

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

---

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

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

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

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

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

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

Следующие правила 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;
}