Липкий заголовок без события прокрутки содержимого с помощью Angular - PullRequest
Новая
       2

Липкий заголовок без события прокрутки содержимого с помощью Angular

2 голосов
/ 10 апреля 2020

Я пытаюсь установить два закрепленных div (один заголовок, один sidenav), используя Angular Material. Sticky div работает, кроме случая прокрутки, когда я прокручиваю свой контент вниз.

enter image description here

И когда я прокручиваю вниз, у меня появляется что-то вроде этого:

enter image description here

Моя проблема в том, что при прокрутке вниз у меня нет события прокрутки с Angular. Если я изменю файл style.s css, установив значение в свойство height css, все липкие div больше не будут работать, НО у меня есть событие прокрутки с Angular.

. нерв :( Любая идея, чтобы решить эту проблему? Спасибо большое!

style.s css

html, body { 
    min-height: auto; // sticky header doesn't work but scroll event Angular OK
    // height: 100%; // sticky header works but scroll event Angular NOK
}

body { 
    margin: 0; 
    font-family: Roboto, "Helvetica Neue", sans-serif; 
}

КОД КЛЕЙКОГО ЖАТКА:

app.component. html

<div class="app-wrapper">
    <router-outlet></router-outlet>
</div>
app.component.s css 

.app-wrapper {
    min-height: 100%;
    overflow-x: hidden;
}
.my-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
}

app-main.component. html

<mat-toolbar color="primary" class="my-toolbar">
    <mat-toolbar-row>
        <div fxFlex fxLayoutAlign="flex-start">
            <mat-icon routerLink="/home">home</mat-icon>
        </div>
        <h1>My title</h1>
    </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

app-main.s css

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
}

STICKY MENU

app-content. html

<div fxLayout="column">
    <img fxFlex="10" src="assets/test.jpg"  alt="menu picture" />

    <div class="categories nav-menu color-primary">
        <app-horizontal-nav
            [navItems]="categories$ | async">
        </app-horizontal-nav>
    </div>

   <!-- content -->
   <app-products></app-products>
</div>

app-content.s css 

.nav-menu {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 50px; // for the first sticky header
}

РЕДАКТИРОВАТЬ:

Здесь демонстрация stackblitz : https://stackblitz.com/edit/angular-9-0-0-rc-1-zhoy51 в стиле. css, измените высоту с авто на 100%, и липкие заголовки будут работать. НО никакое событие прокрутки из scrolledToDirective не запускается.

Ответы [ 2 ]

4 голосов
/ 14 апреля 2020

У вас есть следующее правило в вашей главной оболочке: 

.app-wrapper {
    height: 100%; // doesn't have any effect since parent's(app-root) height is 0 
    overflow-x: hidden; <== remove this
}

Как только вы установите 100% для тела, которое вы переместили, прокрутите эту оболочку.

Вы должны удалить overflow-x: hidden; и он должен работать. Но все еще будет небольшая проблема с горизонтальной прокруткой, вызванная материалом mat-chip-list, поэтому добавьте туда overflow: hidden: 

.nav-menu {
    ...
    overflow: hidden;  <==== this one
}

Forked Stackblitz

enter image description here

0 голосов
/ 20 апреля 2020

Добавьте просто это <body style="height: 100vh!important;" к вашему index.html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...