角度6:如何根据滚动条突出显示导航栏上的元素? [英] Angular 6: How to highlight element on navbar depending on scroll?

问题描述

我正在Angular 6中制作一个页面.这是一个简单的页面，我想根据滚动来突出显示navbar.

I am making a single page in Angular 6. It a simple page and I would like to highlight navbar depending on scroll.

这是我的代码:

.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>

滚动时如何突出显示导航栏元素?

How can I highlight navbar element when I scroll ?

我已经做了一些研究，看来我可以像这样使用HostListener了:

I have done some research and it seem that I can use HostListener like this:

    @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链接.有什么主意吗?

But I still unable to link scroll with div. Any idea ?

推荐答案

这取决于您的项目的复杂程度.以非常原始的方式，您可以执行以下操作:

Well it depends of how sophisticated your project is. In the very primitive way, you can do something like this:

使用ngClass，您将活动"类绑定到currentActive变量.

Using ngClass, you are binding "active" class to currentActive variable.

<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).要获得我们当前的滚动位置，并将其绑定到滚动事件，我们可以简单地做到这一点:

Now, about how to check our current scroll position (current YOffset). To get our current scroll position, and bind it to scroll event we can simply do this:

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

现在我们想要的是知道我们的锚点在Y位置.为此，我们可以使用@ViewChild装饰器.

Now what we would like, is to know at what Y positions are our anchors. To get this, we can use @ViewChild decorator.

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

这仅将我们的引用绑定到我们的变量.为了检查它们的偏移量，我们想先渲染视图，这样我们将收到适当的偏移量.因此，我们将使用ngAfterViewInit

This only bind our references to our variables. To check their offsets, we would like to render our view first, so we will receive proper offsets. Because of that we will use 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>

记住.这是非常适合您问题的RAW解决方案.这完全取决于您的应用程序/组件的复杂程度.无论如何，我希望这会清除一些东西.

And remember. This is very RAW solution to your problem. It all depends on how sophisticated your app/component is. Anyway i hope this will clear some things out.

这篇关于角度6:如何根据滚动条突出显示导航栏上的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！