Creating a navigation bar that smoothly slides into view from the top

In my Angular app (version 2+), the current code I have is:

.header {
  background: rgba(white, 0);
  &.fixed-top {
    background: rgba(white, 1);
    border-bottom: solid whitesmoke 1px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
}
<nav class="navbar navbar-toggleable-sm header" [class.fixed-top]="stickyHeader" (scroll)="scrollHandler()">...</nav>

The handleScroll() function changes the value of stickyHeader to true when the user scrolls past a certain point, making the header menu stick to the top. Here's the code snippet:

stickyHeader = false;

@HostListener('window:scroll', [])
scrollHandler() {
  this.stickyHeader = window.scrollY > 90;
}

My query is: how can I add an animated sliding effect to make the menu appear as if it is descending from the top of the browser?

cssangularcss-animations

Answer №1

By utilizing CSS animations, I was able to achieve the desired outcome by animating transform: translate.

For demonstration purposes, I have set animation-iteration-count to infinite. In your specific case, it should be set to 1.

To adjust the speed of the animation, you can utilize animation-duration.

I have also utilized animation-fill-mode and configured it to forwards in order to halt the animation at its conclusion rather than reverting back to its initial state.

In order to shift it out of view until the animation commences, I included transform: translate(0, -20px) to .fixed-top.

Lastly, I incorporated animation-timing-function: ease; to manage the playback style of the animation.

body {
  margin: 0 auto;
  padding: 0;
}

.fixed-top {
  background: red;
  z-index: 1030;
  width: 100%;
  height: 50%;
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  transform: translate(0, -20px)
}

@keyframes slide {
  0% {
    transform: translate(0, -20px);
    opacity:.1
  }
  100% {
    transform: translate(0, 0);
    opacity:1
  }
}
<div class="fixed-top">test</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

Can I assign a value from the tagModel to ngx-chips in an Angular project?

HTML code: <tag-input class="martop20 tag-adder width100 heightauto" [onAdding]="onAdding" (onAdd)="addInternalDomain($event)" type="text" Ts code: addInternalDomain(tagTex ...

angulartypescriptnpm

Is it possible to include parameters in an HTML GET request with Electron.Net?

I have successfully implemented a function in an Angular component within an Electron application using HttpClient: var auth = "Bearer" + "abdedede"; let header = new HttpHeaders({ "Content-Type": 'application/json&a ...

htmlangularelectron

What steps should I take to create a consistently pristine and efficiently operating Angular 2 setup?

Currently mastering Angular 2 and making significant progress. However, encountering issues when attempting optimized builds with tree shaking. Constantly receiving error explosions deep within the Angular code. These errors may stem from bugs in Angular/n ...

node.jsangularbuilddevelopment-environment

Assembly of Components

As someone new to angular, I am currently in the process of building an angular2 application. My goal is to dynamically create a series of DOM components using the data provided below: // Class construct with properties sorted alphabetically export class ...

htmlangulartypescript

How can I enable SCSS/SASS support on Parcel-Angular5?

I started a project using angular cli. My intention is to incorporate scss into the project. In the terminal of WebStorm, I entered : ng set defaults.styleExt scss I proceeded by renaming all the .css files to .scss and adjusted the imports accordingly ...

angularsassangular-cliparceljs

Encountering RxJS errors during the process of constructing an object using streams retrieved from Firebase

I am currently in the process of developing a template-driven form that involves multiple streams from Firebase. Despite my efforts, I keep encountering errors with the json pipe. The error message I receive is "Converting circular structure to JSON as ...

angularfirebasefirebase-realtime-databaserxjsangularfire2

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Here is some basic HTML code: <div class="stuff-choice"> <div class="item a"> <label class="signup-checkbox"> <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things"> <strong>A&l ...

jquerycssinternet-explorer

Error in Angular production build due to Clean CSS failure

Encountering the following error during the code build process, any solutions? > ng build --prod --no-aot --base-href 92% chunk asset optimizationD:\myproject\node_modules\@angular\cli\node_modules\clean-css\lib&bsol ...

angularangular-cliclean-css

Choosing different elements using identical classes in JQuery

Struggling with a coding problem that seems like it should be an easy fix, but can't quite figure it out. The HTML code I have is as follows: <section class="actualite"> <div class="actualite-text"> <h3 class="title"&g ...

javascriptjqueryhtmlcss

Problem with Internet Explorer version 9 and above and the Flip Card feature

I have a cool feature for one of my clients where clicking on one div causes another div to flip in its place, like a card flipping over. It's kind of like those portfolio image flippers, but instead of images, it flips divs with content inside. How ...

jqueryhtmlcssinternet-explorer

What could be causing disparities in the padding of certain table cells compared to others?

If you're interested, I created a photo gallery over at Take a look around and feel free to download any wallpapers that catch your eye! The issue I'm encountering is with the padding of the columns - specifically, the first and last columns ha ...

phphtmlcssgallerycss-tables

Is there a way to customize the hover style of Material UI Select or Menu MenuItem using the theme?

The theme I designed import { createMuiTheme } from 'material-ui/styles'; export const MyTheme = createMuiTheme({ palette: { primary: { light: '#757ce8', main: '#3f50 ...

cssreactjstypescriptmaterial-ui

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

My table is populated with dynamic rows of input boxes, some of which may have a default value while others return an empty string ''. This causes the table to collapse on those inputs. <tr *ngFor="let d of displayData"> < ...

htmlcssangulartypescript

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

javascriptcsshtml

The element 'nz-list-item-meta-title' in NG-ZORRO is unrecognized

After installing NG-ZORRO for my project, I decided to start by incorporating their list component. However, I encountered errors with elements such as: 'nz-list-item-meta-title' and 'nz-list-item-action' not being recognized. I have e ...

angulartypescriptng-zorro-antd

Troubleshooting a live chat box for CSS alignment issues

Need help with aligning a live chat box on every webpage? Check out this example for reference: You can find my code here: https://jsfiddle.net/fn77d0de/2/ ...

jquerycss

The border is not properly containing the element within

I've been struggling to create a menu with no luck. My goal is to add a border to all my li elements, but the border consistently appears only at the bottom. Is there a way to make the border wrap around the entire li element? Check out my code here: ...

htmlcss

Exploring table iteration in Angular 7

I am looking to create a table with one property per cell, but I want each row to contain 4 cells before moving on to the next row... This is what I want: <table> <tr> <td> <mat-checkbox>1</mat-checkbox& ...

javascriptangulartypescriptloopsangular-template