скрыть заголовок при первой прокрутке полного пространства anchor_menu Angular4 - PullRequest
Новая
       7

скрыть заголовок при первой прокрутке полного пространства anchor_menu Angular4

0 голосов
/ 15 мая 2018

Я сейчас работаю над своим сайтом, используя angular4. Я хочу создать что-то вроде страницы Tumblr с использованием полной прокрутки страницы. Теперь все в порядке с боковым списком и парой слайдов. Однако я хочу скрыть фиксированный заголовок только на первой странице. Я действительно не знаю, как это сделать. Я знаю, что могу использовать ngIf, чтобы скрыть это. Тем не менее, я не знаю, как получить информацию о том, в каком anchor_menu я сейчас нахожусь. Есть ли другой способ добиться этого. (Я использую страницу ngx_full из этого https://github.com/meiblorn/ngx-fullpage). Спасибо. 

<div class="menu-wrapper">
<ul class="menu">
    <li data-menuanchor="menuAnchor1" class="active" ><a href="#menuAnchor1"></a></li>
    <li data-menuanchor="menuAnchor2"><a href="#menuAnchor2"></a></li>
    <li data-menuanchor="menuAnchor3"><a href="#menuAnchor3"></a></li>
    <li data-menuanchor="menuAnchor4"><a href="#menuAnchor4"></a></li>
    <li data-menuanchor="menuAnchor5"><a href="#menuAnchor5"></a></li>
    <li data-menuanchor="menuAnchor6"><a href="#menuAnchor6"></a></li>
</ul>
</div>
<div [mnFullpage]="options">
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page1></app-page1>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page2></app-page2>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page3></app-page3>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page4></app-page4>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page5></app-page5>
        </div>
    </div>
    <div class="section fp-section fp-table">
        <div class="fp-tableCell">
            <app-page6></app-page6>
        </div>
    </div>
</div>
<app-header></app-header>

а это мой тс 

import { Component, OnInit, Input } from '@angular/core';
import { MnFullpageService, MnFullpageOptions } from 'ngx-fullpage';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
    @Input() public options: MnFullpageOptions = new MnFullpageOptions({
        controlArrows: false,
        scrollingSpeed: 700,

        menu: '.menu',
        css3: true,
        anchors: [
            'menuAnchor1', 'menuAnchor2', 'menuAnchor3',
            'menuAnchor4', 'menuAnchor5', 'menuAnchor6'
        ]
    });

  constructor(public fullpageService: MnFullpageService) { }

  ngOnInit() {}

}

1 Ответ

0 голосов
/ 16 мая 2018

Используйте для этого классы состояний fullPage.js или обратные вызовы .Проверьте этого видеоурока, который я сделал относительно условий css3 на основе классов состояния fullpage.js.

Вы также можете проверить пример callbacks2.html , предоставленный в fullPage.js.

Что касается эффекта Tumblr, отметьте в этой статье о том, как создать эффект Tumblr, используя fullPage.js .

...