In my Angular application, I have structured the header as follows:
-- 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>
<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;
}
Check out the working StackBlitz here.
In this setup, the scroll-div has a list of items which are scrollable.
When scrolling starts, I want to hide the create and search buttons in the search-wrapper, leaving only the search box visible (shrunken).
Once scrolling returns to the top, the create and search buttons should be displayed again.
The desired output should resemble Google's search functionality.
Initially, the search results will look like this:
https://i.stack.imgur.com/lieMS.png
During scrolling, it should shrink as shown below:
https://i.stack.imgur.com/dWioe.png
I am looking for a way to accomplish this without using jQuery, preferably utilizing Angular methods.