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

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

如果我开始滚动，则需要缩小search-wrapper（要隐藏的创建和搜索按钮）。

再次滚动到达上升点，那应该是正常的。

预期输出类似于google搜索。

初始搜索结果就像

在滚动开始时，它会收缩，

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

请帮助我达到预期的结果不用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';和在模块@NgModule import上的 BrowserAnimationsModule

有关角度信息的更多信息，请检查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;
}

缩小div而不使用jquery

3 个答案: