Animate fixed/sticky header on scroll in Angular
This article is about sticky header, how we can have sticky header quickly in our angular application, and how we can style it on scroll with example.
Sticky header or fixed headers are the headers which remain stick to top of web page even if we scroll down to the page. Today there are many web designers adopting sticky headers as a way to arrange and structure a website for a better user navigation. Sticky header helps quick navigation between multiple pages in web application as well as in mobile Applications.
If we build a website with normal html CSS its easy to apply JavaScript but in angular many beginners face challenges to apply JavaScript logic to our html element. So in this article you will get a proper solution from which you will be able to add javascript in angular application. This article will guide you how to design sticky header and then how to apply different styles to the header on scroll .
First, we will make fix header, then will apply style to animate it
Let’s start…
Step 1: Create a header of your own style
app>>app.component.html
<div class="background">
<div class="head">
<h1 class="text">HEADER</h1>
</div>
</div>Step 2: Apply CSS
app>>app.component.css
.background {
height: 1500px;
width: 100%;
}
.head {
border-bottom: 3px solid #1f6a7d9c;
padding: 15px;
width: 100%;
z-index: 99;
background: white;
position: -webkit-sticky;
position: fixed;
height: 120px;
transition: 0.3s;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.text {
text-align: center;
font-size: 50px;
color: black;
}Step 3: Add JavaScript file in angular application.
To apply JavaScript logic code to html element in angular, we need to add JavaScript specific file in asset folder. Any external file i.e JS/CSS present in your angular project should be defined in index.html else the logic of that particular file will not work.
First create a main.js file in assets folder as shown in figure
Define main.js file tag in index.html file in <body> tag after <app-root></app-root> tag.
index.html
<script src="assets/js/main.js"></script>Note: Add jQuery library before adding main.js file
Then paste below code in main.js file
assets>>js>>main.js
$(document).ready(function () {
var header = $(".head");
var text = $(".text")
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 30) {
header.addClass("scrolled");
text.addClass("text_style");
} else {
header.removeClass("scrolled");
text.removeClass("text_style");
}
});
});Add scrolled and text_style class properties in css file as
app>>app.component.css
.scrolled {
transition: 0.3s;
background: #84bcd8f8;
height: 80px;
border-bottom: 2px solid #1f6a7de1;
}.text_style {
font-size: 30px;
color: white;
}
Your CSS will look like
app>>app.component.css
.background {
height: 1500px;
width: 100%;
}.head {
border-bottom: 3px solid #1f6a7d9c;
padding: 15px;
width: 100%;
z-index: 99;
background: white;
position: -webkit-sticky;
position: fixed;
height: 120px;
transition: 0.3s;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}.text {
text-align: center;
font-size: 50px;
color: black;
}.scrolled {
transition: 0.3s;
background: #84bcd8f8;
height: 80px;
border-bottom: 2px solid #1f6a7de1;
}.text_style {
font-size: 30px;
color: white;
}
CSS properties scrolled class will be applied when we scroll down
Done..!
For any queries comment below.
Happy Coding 🙂
