缩小没有jquery的div

Question

在我的角度应用程序中，我的标题与格式一样，

-- Header --

-- Sub header --

-- Search Box --

-- Create and Search Button --

-- Scroll Div --

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"> Create </button> &nbsp; &nbsp;
    <button type="button"> Search </button> <br><br>
</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> 

CSS：

.search-box {
   border-radius: 25px;
    border: 5px solid #000;
    padding: 10px;
    width: 90%;
}

.scroll-div {
   height: calc(100vh - 400px);
   overflow: scroll;
}

和工作堆栈闪电战 https://stackblitz.com/edit/angular-vhnt8q

这里我有一个类名为scroll-div 的div，其中列表项可滚动..

如果我开始滚动，那么我需要缩小search-wrapper（创建和搜索按钮被隐藏）..

再次滚动到最高点应该是正常的..

预期的输出类似于谷歌搜索..

初始搜索结果会像，

而在 scroll start 上它会像这样收缩，

以同样的方式，我需要在滚动开始时隐藏创建和搜索按钮并仅显示搜索框（缩小），并且在滚动顶部再次需要显示创建和搜索按钮..

请帮助我实现预期的结果无需 jquery ..

任何角度方式的结果都会对我有更多帮助..

Answer 1

要隐藏和显示元素，您可以通过 元素 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

Answer 2

使用布尔参数和滚动设置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;
    }
  }

Answer 3

您可以仅通过 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

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