Fixed Header Shadow
How do I make an fixed header shadow?
Upon scrolling from the top, the fixed header displays a drop shadow.Forked from Mackenzie Child's Pen Fixed Header Shadow.. What is a fixed header shadow? How do you make a fixed header shadow? This script and codes were developed by Hai Nguyen on 29 January 2023, Sunday.
Fixed Header Shadow - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed Header Shadow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class='header'> <div class='container'> <div class='logo'> <h1>Logo</h1> </div> <nav> <ul> <li> <a href='#'>About</a> </li> <li> <a>Blog</a> </li> <li> <a>Store</a> </li> </ul> </nav> </div>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fixed Header Shadow - Script Codes CSS Codes
h1, h2, h3, h4, h5, h6, p, a, ul, li { font-family: "proxima-nova", sans-serif; font-weight: 100;
}
.container { width: 80%; margin: 0 auto;
}
.header { font-size: 24px; width: 100%; height: 100px; background: white; position: fixed; text-align: center; line-height: 50px; top: 0; left: 0;
}
.header h1 { font-weight: 700; text-transform: uppercase; letter-spacing: -6px; line-height: 50px; float: left; padding-left: 25px; color: #f67600;
}
.header nav { float: right; padding-right: 35px; line-height: 50px;
}
.header nav ul li { list-style: none; display: inline-block; margin-left: 25px; padding-top: .2em;
}
.header nav ul li a { text-decoration: none; color: #767d88;
}
.header nav ul li a:hover { color: #f67600;
}
.header.shadow { -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3); -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3); box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}
body { height: 1000px; background: #E8EBF0;
}
Fixed Header Shadow - Script Codes JS Codes
var header = $('.header');
$(window).scroll(function(e){ if(header.offset().top !== 0){ if(!header.hasClass('shadow')){ header.addClass('shadow'); } }else{ header.removeClass('shadow'); }
});
Developer | Hai Nguyen |
Username | HaiNguyen007 |
Uploaded | January 29, 2023 |
Rating | 3 |
Size | 3,112 Kb |
Views | 6,072 |
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!
Name | Size |
Sticky notes with CSS3 | 2,146 Kb |
CSS Ribbon Headings | 3,068 Kb |
How to Create a Paper Sticky Note Using Only CSS3 | 2,405 Kb |
A Pen by Hai Nguyen | 2,171 Kb |
Sticky footer without fixed height | 2,288 Kb |
Ribbons with Dynamic Text | 0 Kb |
Css-sticky-notes | 1,995 Kb |
Create a stunning menu in CSS3 | 3,074 Kb |
Sticky section header | 2,528 Kb |
Creating Different CSS3 Box Shadows Effects | 1,814 Kb |
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!
Name | Username | Size |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Template | Indra_z85 | 2,323 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Simple Weather App | Cmwebby | 0 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
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!