How to Create a Fixed Header Which Animates on Page Scroll
How do I make an how to create a fixed header which animates on page scroll?
Check out the full tutorial!. What is a how to create a fixed header which animates on page scroll? How do you make a how to create a fixed header which animates on page scroll? This script and codes were developed by Envato Tuts+ on 28 July 2022, Thursday.
How to Create a Fixed Header Which Animates on Page Scroll Previews
How to Create a Fixed Header Which Animates on Page Scroll - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>How to Create a Fixed Header Which Animates on Page Scroll</title> <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <nav> <h1> <a href="" class="logo">Logo</a> </h1> <ul> <li><a href="">About</a></li> <li><a href="">Services </a></li> <li><a href="">Portfolio</a></li> <li><a href="">Contact</a></li> </ul> <button class="toggle-menu" aria-label="Responsive Navigation Menu">☰</button> </nav>
</header>
<main> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam temporibus repellat voluptatem sit nulla commodi, maxime optio aperiam! Consequuntur necessitatibus iste amet id, nihil laboriosam voluptatem cum laudantium ab repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> <p> Eipsum dolor sit amet, consectetur adipisicing elit. Quisquam temporibus repellat voluptatem sit nulla commodi, maxime optio aperiam! Consequuntur necessitatibus iste amet id, nihil laboriosam voluptatem cum laudantium ab repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam temporibus repellat voluptatem sit nulla commodi, maxime optio aperiam! Consequuntur necessitatibus iste amet id, nihil laboriosam voluptatem cum laudantium ab repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis.<p> <p> ipsum dolor sit amet, consectetur adipisicing elit. Quisquam temporibus repellat voluptatem sit nulla commodi, maxime optio aperiam! Consequuntur necessitatibus iste amet id, nihil laboriosam voluptatem cum laudantium ab repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> </p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Eipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsum blanditiis, enim beatae, ipsam tempore, ullam voluptas consequuntur laborum, dolor nobis nam velit iure. Autem veniam atque quo, sunt veritatis!</p>
</main>
<div class="counter"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
How to Create a Fixed Header Which Animates on Page Scroll - Script Codes CSS Codes
/*RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body,
h1,
ul { margin: 0;
}
li { list-style-type: none;
}
h1 { font-size: 1.5rem;
}
a { text-decoration: none; text-transform: uppercase; color: #fff;
}
.toggle-menu { box-shadow: none; background: transparent; border: 0;
}
body { background: #f1f1f1; color: #272626; font: normal 20px/1.6 "Noto Sans", sans-serif;
}
/* HEADER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header { position: fixed; top: 0; width: 100%; padding: 20px; box-sizing: border-box; background: #DD3543;
}
nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: -webkit-box-align .2s; transition: -webkit-box-align .2s; transition: align-items .2s; transition: align-items .2s, -webkit-box-align .2s, -ms-flex-align .2s;
}
.logo { font-size: 2rem; display: inline-block; padding: 20px 30px; background: #F35B66; color: #fff; margin: 50px 0 0 50px; -webkit-transition: all .2s; transition: all .2s;
}
ul { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 50px 50px 0 0; padding: 0; -webkit-transition: margin .2s; transition: margin .2s;
}
li:not(:last-child) { margin-right: 20px;
}
li a { display: block; padding: 10px 20px;
}
.toggle-menu { display: none; font-size: 2rem; color: #fff; margin: 10px 10px 0 0; -webkit-transition: margin .2s; transition: margin .2s;
}
/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main { display: block; padding: 0 20px;
}
/* STYLES FOR THE "scroll" CLASS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.scroll { box-shadow: 0 7px 0 0 rgba(0, 0, 0, .1);
}
.scroll .logo { padding: 10px 20px; font-size: 1.5rem;
}
.scroll nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.scroll .logo,
.scroll ul,
.scroll .toggle-menu { margin: 0;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1060px) { header { padding: 10px; } nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } ul { display: none; } .logo { font-size: 1.8rem; margin: 10px 0 0 10px; } .toggle-menu { display: block; }
}
/* STYLES FOR THE COUNTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.counter { visibility: hidden; position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 1px; padding: 5px; color: #fff; background: #DD3543;
}How to Create a Fixed Header Which Animates on Page Scroll - Script Codes JS Codes
(function() { 'use strict'; var m = document.querySelector("main"), h = document.querySelector("header"), c = document.querySelector(".counter"), counter = 0, hHeight; function setTopPadding() { hHeight = h.offsetHeight; m.style.paddingTop = hHeight + "px"; } function onScroll() { window.addEventListener("scroll", _.throttle(callbackFunc, 200)); /** * Replace the line above with the following one * to see how many more times the "callbackFunc" is executed */ // window.addEventListener("scroll", callbackFunc); function callbackFunc() { c.style.visibility = "visible"; c.innerHTML = counter++; var y = window.pageYOffset; if (y > 150) { h.classList.add("scroll"); } else { h.classList.remove("scroll"); } } } window.onload = function() { setTopPadding(); onScroll(); }; window.onresize = function() { setTopPadding(); };
})();
| Developer | Envato Tuts+ |
| Username | tutsplus |
| Uploaded | July 28, 2022 |
| Rating | 4 |
| Size | 3,561 Kb |
| Views | 38,456 |
Do you need developer help for How to Create a Fixed Header Which Animates on Page Scroll?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Envato Tuts+ (tutsplus) Script Codes
| Name | Size |
| How to Animate a Coffee Drinking Sprite With ScrollMagic | 3,543 Kb |
| Building a Vertical Timeline With CSS and a Touch of JavaScript | 3,525 Kb |
| How to Build a Blog Layout With Bulma | 3,282 Kb |
| Material Design Lite grid demo | 1,803 Kb |
| Material Design Lite topbar demo | 1,738 Kb |
| CSS Tooltip Magic | 3,027 Kb |
| Adding Appeal to Your Animations on the Web | 5,132 Kb |
| Material Design Lite card demo | 2,045 Kb |
| Remix CodePen Challenge | 2,110 Kb |
| Building a Horizontal Timeline With CSS and JavaScript | 6,281 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| SnappySnippet Test | Elmsoftware | 8,385 Kb |
| CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
| A Pen by Eka Risyana | Risyana | 3,705 Kb |
| Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
| Header Line Issue | Charlie-volpe | 1,768 Kb |
| CSS background-size - GSAP | Jonathan | 2,209 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| Shape Outside - Polygon | Stacy | 3,954 Kb |
| Testing Portfolio Page | Sideshowli | 3,395 Kb |
| Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!