不使用jquery收缩DIV

隐藏和显示 你可以通过 元素ID

在.html和.ts文件上使用事件方法添加以下函数:

HTML: (scroll)="scroll($event.target.value) 习惯于 检测卷轴

TS:

scroll(val) {
    let scroll = document.getElementById('scroll');

    if (scroll.scrollTop == 0) {
      this.isShow = 'show';
    } else {
      this.isShow = 'hide';
    }
  }

检查以下内容 stackblitz fork

要添加需要导入的动画:

import {
    trigger,
    state,
    style,
    animate,
    transition
} from '@angular/animations';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

然后添加

 animations: [
     trigger('toggleHeight', [
            state('hide', style({
                height: '0px',
                opacity: '0',
                overflow: 'hidden',
                // display: 'none'
            })),
            state('show', style({
                height: '*',
                opacity: '1',
                // display: 'block'
            })),
            transition('hide => show', animate('200ms ease-in')),
            transition('show => hide', animate('200ms ease-out'))
        ])
    ],

不要忘记包括以下内容: import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 和 BrowserAnimationsModule 在模块@ngmodule导入时

有关角度信息的更多信息,请查看 here / demo

使用布尔参数和滚动集 flase 使用 *ngIf 显示/隐藏按钮并检查 event.target.scrollTop > 0 .

See blitz

HTML

<h1> Header </h1>
<h3> Sub header </h3>
<div class="search-box-wrapper">
    <input class="search-box" type="text" placeholder="search"> <br><br><br>
    <button type="button" *ngIf="scrollable"> Create </button> &nbsp; &nbsp;
    <button type="button" *ngIf="scrollable"> Search </button> <br><br>
</div>
<p> <b> While Scroll startes in the below div and shrink the above create and search </b> </p>
<div class="scroll-div" (scroll)="onscroll($event)">
  <ul>
    <li> <h1> User One </h1> </li>
    <li> <h1> User Two </h1> </li>
    <li> <h1> User Three </h1> </li>
    <li> <h1> User Four </h1> </li>
    <li> <h1> User Five </h1> </li>
    <li> <h1> User Six </h1> </li>
    <li> <h1> User Seven </h1> </li>
    <li> <h1> User Eight </h1> </li>
    <li> <h1> User Nine </h1> </li>
    <li> <h1> User Ten </h1> </li>
     </ul>
  </div>

TS

  scrollable:boolean=true;
  onscroll(event:any){
    console.log(event.target.scrollTop)
    if (event.target.scrollTop > 0) {
      this.scrollable=false;
    }
    else{
      this.scrollable=true;
    }
  }

你只能通过CSS3来实现粘性导航栏。我希望它会有用。

html:app.component.html

<h1> Header </h1>
<h3> Sub header </h3>
<div class="search-container">
  <div class="search-box-wrapper">
      <input class="search-box" type="text" placeholder="search">
      <div class="search-box-btn">
        <button type="button"> Create </button>
        <button type="button"> Search </button>
      </div>
  </div>
  <div class="scroll-div">
    <ul>
      <li> <h1> User One </h1> </li>
      <li> <h1> User Two </h1> </li>
      <li> <h1> User Three </h1> </li>
      <li> <h1> User Four </h1> </li>
      <li> <h1> User Five </h1> </li>
      <li> <h1> User Six </h1> </li>
      <li> <h1> User Seven </h1> </li>
      <li> <h1> User Eight </h1> </li>
      <li> <h1> User Nine </h1> </li>
      <li> <h1> User Ten </h1> </li>
      </ul>
  </div>
</div>

css:app.component.css(应用程序组件.css)

.search-container{
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 400px);
}
.search-box-wrapper{
  position: sticky;
  width:100%;
  top:0px;
  background-color:#fff;
  padding-bottom:10px;
}
.search-box-wrapper .search-box {
    border-radius: 25px;
    border: 5px solid #000;
    padding: 10px;
}
.search-box-wrapper input{
    width: 100%;
}
.search-box-wrapper .search-box-btn{
    margin-top:10px;
    width: 100%;
    margin-left: 25px;
}
.search-box-wrapper button{
  margin-right:20px;
}