How to Create Sticky Header with Animation in Magento 2?

How to add a custom Js file?

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="js/custom.js" />
</head>
</page>
requirejs(['jquery'], function( $ ) {
$(window).scroll(function () {
//variables
var getHeaderHeight = $('.page-header').innerHeight();
var scroll = $(window).scrollTop();
if(scroll >= getHeaderHeight) {
$(".page-header").addClass("sticky active");
}
else
{
$(".page-header").removeClass("sticky active");
}
});
});

How to Add CSS/LESS File?

Update in LESS file

.page-wrapper {
.page-header.sticky.active {
position: fixed…

How to Display Products by Custom Attribute in Magento 2?
  1. Add and Customize Custom Tab on Product Page Magento 2

How to Create Custom Attribute in Magento 2?

Step 1: Create a new Attribute “sample” in Admin


How to Override Files in Magento 2?
  1. Theme Concept in Magento 2
  2. Layout Overview in Magento 2

How to override template files in Magento 2?


How to Create Custom Module in Magento 2
  1. Create module folder
  2. Create registration.php
  3. Create etc/module.xml file
  4. Create etc/frontend/routes.xml
  5. Create controller
  6. Create template file

You may also like this article:

  1. Theme Concept in Magento 2
  2. Add and Customize Custom Tab on Product Page Magento 2

Step 1: Create module folder


Step 1: Login Magento Admin > Content > Configuration


Configure Theme Properties in Magento 2, view.xml
Configure Theme Properties in Magento 2, view.xml
Configure Theme Properties in Magento 2

What is view.xml file?


Configure Theme Properties in Magento 2, view.xml
Configure Theme Properties in Magento 2, view.xml

What is layouts?


Configure Theme Properties in Magento 2, view.xml
Configure Theme Properties in Magento 2, view.xml


Aryan Srivastava

Magento Frontend Developer at Magneto IT Solutions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store