Angular Sticky Header перекрывающийся контент - PullRequest
Новая
       29

Angular Sticky Header перекрывающийся контент

0 голосов
/ 07 июня 2018

Я пытаюсь настроить липкую навигационную панель под углом 6.

, но в итоге она выглядит примерно так: основное содержимое перекрывается с моей навигационной панелью при прокрутке вниз (это похоже на прокрутку под ней) navbar overlapping Я уже пытался установить z-индекс класса nav.я также попытался поместить div вокруг маршрутизатора в app.component.html и сместить его, но это не сработало либо

рад за вашу помощь!

scss дляпанель навигации выглядит следующим образом: 

  .nav {
  position: sticky;
  top: 0;
  background: $primary-color;
  }
.nav-container {
  display: grid;
  grid-template-areas: 'home members list messages . loginForm';
  grid-template-rows: 50px;
  grid-template-columns: 100px 100px 100px 100px 1fr auto;
}

my app.component.html как этот 

<app-nav></app-nav>
<router-outlet></router-outlet>

HTML-код этой конкретной страницы выглядит следующим образом: 

<div class="grid-container" style="height: 500px">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>
<div class="grid-container" style="height: 500px">
</div>
<div class="grid-container" style="height: 500px">
</div>
<div class="grid-container" style="height: 500px">
</div>
<div class="grid-container" style="height: 500px">
</div>

и, наконец, масштаб страницы: 

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 100px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

1 Ответ

0 голосов
/ 04 сентября 2018

Я столкнулся с аналогичной проблемой, реализующей @ w11k / angular-sticky-things .Проблема в том, что вы как бы удаляете элемент со страницы - тогда весь остальной контент занимает свободное место, если навигация идет плохо.Я решил проблему, добавив элемент распорки, который принимает высоту, как только элемент становится липким.Для этого вычислите высоту элемента navbar и присвойте высоту элементу spacer: 

 this.spacer.style.height = `${height}px`;

Чтобы получить высоту элемента cal getBoundingClientRect на nativeElement панелей навигации.Для получения дополнительной информации о моей реализации посмотрите: https://github.com/w11k/angular-sticky-things

Также я не уверен, что буду использовать position: sticky уже: https://caniuse.com/#feat=css-sticky

...