Угловой 6: Как выделить элемент на панели навигации в зависимости от прокрутки?

Question

Я делаю одну страницу на Angular 6. Это простая страница, и я хотел бы выделить navbar в зависимости от прокрутки.

вот мой код:

.sticky {
  position: sticky;
  top: 0;
}
#i ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

#i li {
  float: left;
}

#i li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#i li a:hover {
  border-radius: 0px 0px 10px 10px;
  background-color: rgb(43, 137, 226);
}

/* #i {
  margin: 0px 0px 40px 0px;
} */

#footer-id {
  background-color:blue;
}

<span id="i">
  <ul class="sticky">
    <li id="i"><a class="active" href="#">Home</a></li>
    <li><a href="#news" (click)="scrollToElement(new)">News</a></li>
    <li><a href="#contact" (click)="scrollToElement(con)">Contact</a></li>
    <li><a href="#about" (click)="scrollToElement(about)">About</a></li>

    <ul class="nav navbar-nav pull-right">
      <li class="nav"><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li class="nav">
        <a href="#ta" (click)="scrollToElement(con)">Target</a>
      </li>
    </ul>
  </ul>
</span>

<div class="container" style="margin-bottom: 20px;">
  <div #home>
    <br />
    <br />
    <h1>Home</h1>
    <p>You contact us here. Thank for your greatness</p>
    <p>
      Welcome to the Random Phrase and Idiom Generator. There will be times when
      you may need more than a random word for what you want to accomplish, and
      this free online tool can help. The use of this tool is quite simple. All
      you need to do is indicate the number of random phrases you'd like to be
      displayed, and then hit the "Generate Random Phrases" button. Once done,
      your chosen number of idioms will be displayed along with the meaning of
      the idiom.
    </p>
    <p>
      Welcome to the Random Phrase and Idiom Generator. There will be times when
      you may need more than a random word for what you want to accomplish, and
      this free online tool can help. The use of this tool is quite simple. All
      you need to do is indicate the number of random phrases you'd like to be
      displayed, and then hit the "Generate Random Phrases" button. Once done,
      your chosen number of idioms will be displayed along with the meaning of
      the idiom.
    </p>
  </div>
  <div #con>
    <br />
    <br />
    <h1>Contact</h1>
    <p>You contact us here. Thank for your greatness</p>
    <p>
      Idioms are a wonderful part of the English language that give it a lot of
      flavor. They force people to know more than the literal meaning of words.
      Idioms are commonly used phrases which have a meaning completely different
      than their literal meaning. This can be quite confusing to those who
      aren't familiar with the idiom and those who are studying English.
    </p>
    <p>
      Idioms are a wonderful part of the English language that give it a lot of
      flavor. They force people to know more than the literal meaning of words.
      Idioms are commonly used phrases which have a meaning completely different
      than their literal meaning. This can be quite confusing to those who
      aren't familiar with the idiom and those who are studying English.
    </p>
  </div>

  <div #new>
    <br />
    <br />
    <h1>News</h1>
    <p>This are new from us</p>
    <p>
      Using this tool can be excellent practice for students studying English as
      a second language because it gives the literal meaning of each phrase.
      This allows them to see the phrase and its meaning at the same time. While
      there are long idiom lists available online, trying to navigate through
      them all on a single page can be daunting. Being able to create the exact
      number of random idioms which best suits your learning needs is a
      advantage this tool has over standard phrase list. In this way, this tool
      provides an excellent way for those learning English to practice their
      knowledge of English idioms and to learn new ones in the process.
    </p>
    <p>
      Using this tool can be excellent practice for students studying English as
      a second language because it gives the literal meaning of each phrase.
      This allows them to see the phrase and its meaning at the same time. While
      there are long idiom lists available online, trying to navigate through
      them all on a single page can be daunting. Being able to create the exact
      number of random idioms which best suits your learning needs is a
      advantage this tool has over standard phrase list. In this way, this tool
      provides an excellent way for those learning English to practice their
      knowledge of English idioms and to learn new ones in the process.
    </p>
  </div>

  <div #about>
    <br />
    <br />
    <h1>About</h1>
    <p>This are new from us</p>
    <p>
      It can also be a wonderful way for writers to brainstorm and spur more
      creativity in their writing. The tool can be used to get writing ideas
      flowing forcing the writer to use more creativity than they would with a
      single random word. For example, the writer can use the generated phrase
      to create a new paragraph or story. Since the writer has no idea what will
      appear, or even if they will be familiar with the idiom, it forces the
      writer to use creativity to incorporate it into what they're writing.
    </p>
    <p>
      It can also be a wonderful way for writers to brainstorm and spur more
      creativity in their writing. The tool can be used to get writing ideas
      flowing forcing the writer to use more creativity than they would with a
      single random word. For example, the writer can use the generated phrase
      to create a new paragraph or story. Since the writer has no idea what will
      appear, or even if they will be familiar with the idiom, it forces the
      writer to use creativity to incorporate it into what they're writing.
    </p>
  </div>
</div>

<!-- Footer -->
<footer class="page-footer font-small indigo" id="footer-id">
  <!-- Footer Links -->
  <div class="container text-center text-md-left">
    <!-- Grid row -->
    <div class="row">
      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Very long link 1</a></li>
          <li><a href="#!">Very long link 2</a></li>
          <li><a href="#!">Very long link 3</a></li>
          <li><a href="#!">Very long link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none" />

      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none" />

      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none" />

      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->
    </div>
    <!-- Grid row -->
  </div>
  <!-- Footer Links -->

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">
    © 2018 Copyright:
    <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>

Как выделить элемент navbar при прокрутке?

Я провел некоторые исследования, и мне кажется, что я могу использовать HostListener следующим образом:

    @HostListener('window:scroll', ['$event'])
  scrollHandler(event) {
    console.log('Scroll Event');
    // console.log(event);
    const verticalOffset =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      0;

    console.log(verticalOffset);
  }

Но я все еще не могу связать прокрутку с div.Есть идеи?

Answer 1

Ну, это зависит от того, насколько сложен ваш проект.Очень простым способом вы можете сделать что-то вроде этого:

Используя ngClass, вы привязываете «активный» класс к переменной currentActive.

<li><a href="#" [ngClass]="{'active': currentActive === 1}">Home</a></li>
<li><a href="#news" [ngClass]="{'active': currentActive === 2}" (click)="scrollToElement(new)">News</a></li>
<li><a href="#contact" [ngClass]="{'active': currentActive === 3}" (click)="scrollToElement(con)">Contact</a></li>
<li><a href="#about" [ngClass]="{'active': currentActive === 4}" (click)="scrollToElement(about)">About</a></li>

Теперь о том, как проверить наш текущийположение прокрутки (текущий YOffset).Чтобы получить нашу текущую позицию прокрутки и привязать ее к событию прокрутки, мы можем просто сделать это:

@HostListener('window:scroll', ['$event'])
checkOffsetTop() {
  console.log(window.pageYOffset); // this will console log our scroll position
}

Теперь нам нужно знать, в каких позициях Y наши якоря.Чтобы получить это, мы можем использовать декоратор @ViewChild.

@ViewChild('home') homeElement: ElementRef;
@ViewChild('con') conElement: ElementRef;
@ViewChild('new') newElement: ElementRef;
@ViewChild('about') aboutElement: ElementRef;

Это только связывает наши ссылки на наши переменные.Чтобы проверить их смещения, мы хотели бы сначала отобразить наше представление, чтобы мы получили правильные смещения.Из-за этого мы будем использовать ngAfterViewInit

ngAfterViewInit() {
  this.homeOffset = this.homeElement.nativeElement.offsetTop;
  this.conOffset = this.conElement.nativeElement.offsetTop;
  this.newOffset = this.newElement.nativeElement.offsetTop;
  this.aboutOffset = this.aboutElement.nativeElement.offsetTop;
}

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

import { Component, AfterViewInit, ViewChild, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('home') homeElement: ElementRef;
  @ViewChild('con') conElement: ElementRef;
  @ViewChild('new') newElement: ElementRef;
  @ViewChild('about') aboutElement: ElementRef;

  public currentActive = 0;
  public homeOffset: Number = null;
  public conOffset: Number = null;
  public newOffset: Number = null;
  public aboutOffset: Number = null;

  ngAfterViewInit() {
    this.homeOffset = this.homeElement.nativeElement.offsetTop;
    this.conOffset = this.conElement.nativeElement.offsetTop;
    this.newOffset = this.newElement.nativeElement.offsetTop;
    this.aboutOffset = this.aboutElement.nativeElement.offsetTop;
  }

  scrollToElement() {
    // scrollToElement Code :)
  }

  @HostListener('window:scroll', ['$event'])
  checkOffsetTop() {
    if (window.pageYOffset >= this.homeOffset && window.pageYOffset < this.conOffset) {
      this.currentActive = 1;
    } else if (window.pageYOffset >= this.conOffset && window.pageYOffset < this.newOffset) {
      this.currentActive = 2;
    } else if (window.pageYOffset >= this.newOffset && window.pageYOffset < this.aboutOffset) {
      this.currentActive = 3;
    } else if (window.pageYOffset >= this.aboutOffset) {
      this.currentActive = 4;
    } else {
      this.currentActive = 0;
    }
  }
}

.sticky {
    position: sticky;
    top: 0;
  }

  .active {
      font-weight: bold !important;
      color: red !important;
      font-size: 1.2rem !important;
  }

  #i ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: blue;
  }
  
  #i li {
    float: left;
  }
  
  #i li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  #i li a:hover {
    border-radius: 0px 0px 10px 10px;
    background-color: rgb(43, 137, 226);
  }
  
  /* #i {
    margin: 0px 0px 40px 0px;
  } */
  
  #footer-id {
    background-color:blue;
  }

<span id="i">
  <ul class="sticky">
    <li><a href="#" [ngClass]="{'active': currentActive === 1}">Home</a></li>
    <li><a href="#news" [ngClass]="{'active': currentActive === 2}" (click)="scrollToElement(new)">News</a></li>
    <li><a href="#contact" [ngClass]="{'active': currentActive === 3}" (click)="scrollToElement(con)">Contact</a></li>
    <li><a href="#about" [ngClass]="{'active': currentActive === 4}" (click)="scrollToElement(about)">About</a></li>

    <ul class="nav navbar-nav pull-right">
      <li class="nav"><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li class="nav">
        <a href="#ta" (click)="scrollToElement(con)">Target: {{ currentActive }}</a>
      </li>
    </ul>
  </ul>
</span>

<div class="container" style="margin-bottom: 20px;">
  <div #home>
    <br />
    <br />
    <h1>Home | offset: {{ homeOffset }}</h1>
    <p>You contact us here. Thank for your greatness</p>
    <p>
      Welcome to the Random Phrase and Idiom Generator. There will be times when
      you may need more than a random word for what you want to accomplish, and
      this free online tool can help. The use of this tool is quite simple. All
      you need to do is indicate the number of random phrases you'd like to be
      displayed, and then hit the "Generate Random Phrases" button. Once done,
      your chosen number of idioms will be displayed along with the meaning of
      the idiom.
    </p>
    <p>
      Welcome to the Random Phrase and Idiom Generator. There will be times when
      you may need more than a random word for what you want to accomplish, and
      this free online tool can help. The use of this tool is quite simple. All
      you need to do is indicate the number of random phrases you'd like to be
      displayed, and then hit the "Generate Random Phrases" button. Once done,
      your chosen number of idioms will be displayed along with the meaning of
      the idiom.
    </p>
  </div>
  <div #con>
    <br />
    <br />
    <h1>Contact</h1>
    <p>You contact us here. Thank for your greatness</p>
    <p>
      Idioms are a wonderful part of the English language that give it a lot of
      flavor. They force people to know more than the literal meaning of words.
      Idioms are commonly used phrases which have a meaning completely different
      than their literal meaning. This can be quite confusing to those who
      aren't familiar with the idiom and those who are studying English.
    </p>
    <p>
      Idioms are a wonderful part of the English language that give it a lot of
      flavor. They force people to know more than the literal meaning of words.
      Idioms are commonly used phrases which have a meaning completely different
      than their literal meaning. This can be quite confusing to those who
      aren't familiar with the idiom and those who are studying English.
    </p>
  </div>

  <div #new>
    <br />
    <br />
    <h1>News</h1>
    <p>This are new from us</p>
    <p>
      Using this tool can be excellent practice for students studying English as
      a second language because it gives the literal meaning of each phrase.
      This allows them to see the phrase and its meaning at the same time. While
      there are long idiom lists available online, trying to navigate through
      them all on a single page can be daunting. Being able to create the exact
      number of random idioms which best suits your learning needs is a
      advantage this tool has over standard phrase list. In this way, this tool
      provides an excellent way for those learning English to practice their
      knowledge of English idioms and to learn new ones in the process.
    </p>
    <p>
      Using this tool can be excellent practice for students studying English as
      a second language because it gives the literal meaning of each phrase.
      This allows them to see the phrase and its meaning at the same time. While
      there are long idiom lists available online, trying to navigate through
      them all on a single page can be daunting. Being able to create the exact
      number of random idioms which best suits your learning needs is a
      advantage this tool has over standard phrase list. In this way, this tool
      provides an excellent way for those learning English to practice their
      knowledge of English idioms and to learn new ones in the process.
    </p>
  </div>

  <div #about>
    <br />
    <br />
    <h1>About</h1>
    <p>This are new from us</p>
    <p>
      It can also be a wonderful way for writers to brainstorm and spur more
      creativity in their writing. The tool can be used to get writing ideas
      flowing forcing the writer to use more creativity than they would with a
      single random word. For example, the writer can use the generated phrase
      to create a new paragraph or story. Since the writer has no idea what will
      appear, or even if they will be familiar with the idiom, it forces the
      writer to use creativity to incorporate it into what they're writing.
    </p>
    <p>
      It can also be a wonderful way for writers to brainstorm and spur more
      creativity in their writing. The tool can be used to get writing ideas
      flowing forcing the writer to use more creativity than they would with a
      single random word. For example, the writer can use the generated phrase
      to create a new paragraph or story. Since the writer has no idea what will
      appear, or even if they will be familiar with the idiom, it forces the
      writer to use creativity to incorporate it into what they're writing.
    </p>
  </div>
</div>

<!-- Footer -->
<footer class="page-footer font-small indigo" id="footer-id">
  <!-- Footer Links -->
  <div class="container text-center text-md-left">
    <!-- Grid row -->
    <div class="row">
      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Very long link 1</a></li>
          <li><a href="#!">Very long link 2</a></li>
          <li><a href="#!">Very long link 3</a></li>
          <li><a href="#!">Very long link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none" />

      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none" />

      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none" />

      <!-- Grid column -->
      <div class="col-md-3 mx-auto">
        <!-- Links -->
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

        <ul class="list-unstyled">
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!-- Grid column -->
    </div>
    <!-- Grid row -->
  </div>
  <!-- Footer Links -->

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">
    © 2018 Copyright:
    <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>

И помните.Это очень СРОЧНОЕ решение вашей проблемы.Все зависит от того, насколько сложным является ваше приложение / компонент.В любом случае, я надеюсь, что это прояснит некоторые вещи.