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

Updating validators on Angular reactive form controls as they change

I am working with a reactive form where I need to dynamically adjust the validators for the "password" and "confirm password" fields based on user input. I have set up a subscription to listen for changes in the password field's value, updating the va ...

angularvalidationangular-reactive-forms

The styles defined in CSS do not have an impact on EJS templates that have GET route paths stacked

I have a CSS file located in the public directory and two EJS templates in the views directory. The CSS file works fine when using this route: app.get('/theresa', (req, res) => { res.render('templates/home') }) However, when I ...

cssexpress

What is the best way to add an active class to a clicked menu item that already has a class

I have menu items on the master page, and if users click on that menu item, I want to show it as active. My goal is to append "Active" to the existing class to indicate that it is active. _Layout.cshtml: <div class="menu-items-navigation"> <di ...

c#cssasp.netasp.net-mvc

Can Primeng and Angular2 be integrated into JSF without the use of npm?

I'm looking to implement the Angular2 framework for my frontend development, and I've decided to use PrimeNG for the UI components. However, I am not familiar with how npm functions. Here are some tech details: I will be using Eclipse or NetBe ...

angularjsfprimeng

Adjusting the line-height and baseline to accommodate various screen sizes on both mobile and desktop

This problem seems to keep coming back for me. I can't figure out what's causing it. Here are two images showing the issue: On desktops: https://i.sstatic.net/AAGbb.png On mobile devices: https://i.sstatic.net/Zk4pc.jpg As you can see, the ...

htmlcssfontsbaseline

How can I retrieve image files from locations outside the Angular 5 app or assets directory?

One of the features in my app allows users to upload images. I recently learned that it's best practice to store these image files outside of the app or assets folder since those folders are compiled. Here is a snapshot of my app's folder structu ...

angular

Navigating the website with curtain.js and anchor tags

Currently, I am working on a website located at www.TheOneCraft.co.uk. I have incorporated the curtain.js jQuery plugin to create animated slide/pages as users scroll down. However, I have been unsuccessful in making the navigation bar follow this animati ...

javascriptjqueryhtmlcss

Retrieving data from the database without the need to reload the page

Hi there! I have a PHP script that fetches data from a database and I want to display this data within a div element with a "link" class without having to reload the page. Check out the code snippet below: <? include('config.php'); $rs = m ...

javascriptphpjqueryhtmlcss

Troubleshooting Angular 2 routes failing to function post aot compilation deployment

Currently, I am implementing RouterModule in my project and have the following configuration in my app.module.ts file: const appRoutes: Routes = [ { path: '', redirectTo: 'mainMenu', pathMatch: 'full' }, { path: 'mainMen ...

angularangular-cliaotrouterlink

Guide on how to upload files to a web server using Angular frontend only

My website's frontend is built with Angular and it allows users to upload files. I am looking for a way to store these uploaded files on the web server where my website is currently hosted. Ideally, I would like to accomplish this using just Angular, ...

c#angularfileupload

Angular: how to manually trigger change detection without using Angular's dependency injection system

Is there a way to globally initiate angular change detection without having to inject something like ApplicationRef? I am looking to utilize the functionality as a standard JavaScript function rather than a service method, in order to avoid the need for ...

angulardependency-injectionangular2-changedetection

Is Error k originating from Angular or Electron?

While utilizing Angular 10 in my Electron application, I encountered some errors after building a release version of the app. These errors are visible in the Chrome Inspector, but it's unclear whether they stem from Electron or Angular, and the messag ...

node.jsangularelectron

Do you know where I can locate the HTML and CSS pertaining to the search results page

I'm looking for a way to present search results on my website that resembles the Google search results, creating a familiar interface for users. Is there anyone who knows where I can obtain the HTML and CSS code that produces the same style as Google& ...

htmlcssstyles

Is it possible to make the info box centered and adjust everything to seamlessly fit on all screen sizes?

Is there a way to create a centered info box that stretches to fit any screen size? ...

javascriptcsshtml

various image proportions in HTML

I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...

htmlcsswebresponsive-designmedia-queries

What could be the reason for the malfunction of this angular binding?

Looking at the HTML below: <input type="checkbox" name="person" [(ngModel)]="person.selected" /> This input is part of a ngFor loop. Testing has revealed that despite some values of selected being true and others false, all checkboxes appear check ...

javascriptangular

css - Showcasing images with a horizontal scrollbar

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is ...

cssscrolloverflow

Why is margin-top behaving unexpectedly?

Greetings! I have a website created using css, html, and php. Take a moment to review this code: <?php session_start(); include_once "mysql_connect.php"; $log = null; if(isset($_SESSION["ID"])){ $log = $_SESSION["ID"]; }e ...

htmlcss

Steps for making a vertical ion-range control

enter image description hereHello there, I'm trying to create a vertical ion-range instead of a horizontal one in capacitor 4. While I successfully created a horizontal range by following the instructions on https://ionicframework.com/docs/api/range, ...

angularionic-frameworkionic4capacitor

Best practices for embedding Internal CSS and rectifying missing classes in mobile view for email templates on Gmail

I am currently facing an issue with my email template. While it works perfectly fine in Outlook web and the Outlook app, Gmail web and Gmail's internal CSS strip away certain classes automatically. In an attempt to hide the pre-header on mobile devic ...

htmlcsshtml-email