CSS в Angular проект: позиция: исправлена, не всегда работает должным образом - PullRequest
Новая
       46

CSS в Angular проект: позиция: исправлена, не всегда работает должным образом

0 голосов
/ 17 марта 2020

У меня проблемы с заголовком липкой таблицы в моем проекте angular 6.

В моем файле .ts есть условие, которое применяет класс sticky только тогда, когда пользователь прокручивает в направлении определенного указать на странице. Эта часть прекрасно работает. Проблема в том, что когда применяется класс position: fixed, он работает, только если top: 0. css выглядит следующим образом: 

.sticky
    {
        position: fixed;
        top:0;
        width: 100%;
        background-color: #fff;
        padding-right: 20px!important;

    }

Но если я изменю top: 0 на top: 100, тоже будет учитываться заголовок веб-страницы (который построен на другом компоненте), а затем top: 100 Атрибут не будет применяться и будет считаться недействительным.

* * * * * * html немного сложнее, но выглядит примерно так

child.component. html

<div>
  <navigation></navigation>
  <div>
  </div>
  <div class="table-responsive " >
        <table id="tabletop" #tabletop class="table scroll">
            <thead #stickyMenu [class.sticky]="sticky">
                 <tr id="content" class="row1">
                 <tr id="content" class="row2">
                 <tr id="content" class="row3">
            </thead>
       </table>
  </div>
</div>

app.component. html

<header></header>
  <app-child></app-child>
<footer></footer>

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

Почему это так и как я могу получить свою позицию: исправлено Атрибут для того, чтобы держать что-то наверху страницы?

Любая помощь очень ценится!

1 Ответ

0 голосов
/ 17 марта 2020

Я хотел опубликовать это через комментарий, но, похоже, мне нужно как минимум 50 репутации для этого. Итак, вот оно:

Но если я изменю сверху: 0 на вершину: 100 {...}

Единица top, кажется, отсутствует. Вы, вероятно, хотели установить его на 100px? Возможно, значение 0 смутило вас, поскольку оно разрешено с или без единицы.

Еще одна вещь, идентификатор каждого элемента должен быть уникальным, но у вас есть 3 id="content".

Альтернативное решение

Вы можете использовать свойство position: sticky css для вашего элемента thead (а также для соответствующих дочерних элементов th). Таким образом, вам не нужно обрабатывать событие прокрутки самостоятельно, и пусть css сделает всю работу за вас.

Пример:

Я включаю только часть s css здесь, так как фрагменты кода делают пост излишне длинным. Вы можете увидеть полный пример на stackblitz.com . 

thead {
    position: sticky; 
    top: 0px;

    tr {
      position: sticky; top: 0; 

      /* the top value can be adjusted according to <header>'s height */
      &:nth-child(1) th { position: sticky; top: 110px; }   
      &:nth-child(2) th { position: sticky; top: 132px; }
    }
}
...