Angular /Javascript- 如何在滚动功能上缩小 Sticky header？

Question

在 Angular 应用程序中，当用户向下滚动时，我试图缩小 Sticky header 的 header 组件。目前粘性 header 工作正常。

What changes do I need to make to display lower half of header with no text when user scroll down?

Actual component

Expected Output when user scrolls down - 使文本消失并显示 header 为粘性显示组件的下 75%

这是我迄今为止尝试过的方法，当用户向下滚动时，整个组件会变粘

html

<div class="header-comp" [class.sticky] = "sticky" #stickyMenu>
    <p class="text">Header</p>
    <div class="placeholder">
       //placeholder
        </div>
    
    </div>

    <div class="dropdowns">
       //dropdown
    </div>

    <div class="btn">  Button </button>
    </div>

</div>

.scss

.header-comp {
    width: 100%;
    height: 148px;
    background: grey;
    border-radius: 0px;
  }

  .sticky{
    position: fixed;
    top: 0;
    overflow: hidden;
    z-index: 10;
    transition: 0.90s; 
  }
  
  
  .content{
    height: 300vh;
  }

  .text {
    width: 390px;
    height: 26px;
    color: tf-colors.$white;
    font-size: 21px;
    font-family: Arial;
    letter-spacing: 0px;
    line-height: 26px;
    margin-left: 98px;
    padding-top: 40px;
  }

.ts

 sticky: boolean = false;
  @ViewChild('stickyMenu') menuElement: ElementRef;

menuPosition: any;
ngAfterViewInit(){
    this.menuPosition = this.menuElement.nativeElement.offsetTop
    console.log('mE',this.menuElement)
}

  @HostListener('window:scroll', ['$event'])
  handleScroll(){
      const windowScroll = window.pageYOffset;
      console.log(windowScroll)
      if(windowScroll >= this.menuPosition){
          this.sticky = true;
      } else {
          this.sticky = false;
      }
  }

Answer 1

为了让容器真正粘在页面的天花板上，我们需要给负的 top 值。

 .sticky{
    position: fixed;
    top: -60px;  --------> Change top value to negative
    overflow: hidden;
    z-index: 10;
    transition: 0.90s; 
  }

Angular /Javascript- 如何在滚动功能上缩小 Sticky header？

Angular /Javascript- How can I shrink Sticky header on scroll functionality?

javascript

html

css

angular

sticky-footer