Question

我希望在内容向上滚动时将表头固定在固定位置，我的.html文件如下。

 <table class="table sticky-header">
                  <thead>
                      <tr class="row-hor-heading">
                          <th colspan="3" scope="row"><span class="bank-name">{{offer.name}}</span> <br /><span class="offers-heading">{{offer.companyname}}</span></th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr class="row-2-data bg-white">
                          <td colspan="3" scope="row">
                            <button class="btn offerapply-btn waves-effect waves-light" (click)="openThisOffer(offer,leadType)">I&#39;m Interested</button>
                          </td>
                      </tr>
                 </tbody>
   </table>

在typescript中，我在afterviewInit（）函数中编写了代码，即

 ngAfterViewInit(){


  }

我不知道在里面写什么。请帮我做。谢谢你。

Answer 1

您是否尝试过将其放入component.ts文件

public fixed: boolean = false; 
constructor(@Inject(DOCUMENT) private doc: Document) {}
     @HostListener("window:scroll", [])
     onWindowScroll() {
        let num = this.document.body.scrollTop;
        if ( num > 50 ) {
        this.fixed = true;
        }else if (this.fixed && num < 5) {
        this.fixed = false;

比你只需将表更改为

<table [class.fixed]="fixed" class="table sticky-header">

当表内容向上滚动时，粘贴表头 - Angular4

1 个答案: