Stick Header Pow!
How do I make an stick header pow!?
From http://codepen.io/soulrider911. What is a stick header pow!? How do you make a stick header pow!? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.
Stick Header Pow! - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stick Header Pow!</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <h1>Sticky Header Pow!</h1> <nav> <a href="">Home</a> <a href="">About</a> <a href="">Gallery</a> <a href="">Contact</a> </nav> </header> <div class="wrapper"> <section id='steezy'> <h2> This is some steezy stuff</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex libero cupiditate deserunt earum, fuga, ab labore esse animi, nihil est tenetur non delectus perferendis. Maxime accusamus ea rem sint at!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ut aspernatur omnis neque iusto. Veritatis rem ad atque optio perferendis. Dolorum qui consequatur, repellat soluta impedit porro totam molestiae sit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus iusto, omnis quas, rem minus cupiditate, sunt voluptates minima sint nemo ipsa itaque consequatur dolor, quam necessitatibus vitae. Quod, eaque, quam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> </section> <section id='real'> <h2> Keepin' it real</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> </section> <section id='big'> <h2>Go big, or go home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim sunt delectus, reiciendis omnis laudantium animi, et nulla quidem, aliquam aliquid. A consectetur deleniti voluptates eius neque, voluptate voluptatibus nostrum!</p> </section> </div>
</body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Stick Header Pow! - Script Codes CSS Codes
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background-color: #ecf0f1; font-family: helvetica, arial, sans-serif; font-size: 16px; padding-top: 330px; -moz-transition: padding-top 0.5s ease; -o-transition: padding-top 0.5s ease; -webkit-transition: padding-top 0.5s ease; transition: padding-top 0.5s ease;
}
header { width: 100%; height: 300px; background-color: #3498db; text-align: center; position: relative; position: fixed; top: 0; overflow: hidden; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
header h1 { font-size: 42px; color: #fff; line-height: 230px; text-transform: uppercase; font-weight: 100; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
header nav { position: absolute; bottom: 0; height: 60px; line-height: 60px; width: 100%; background-color: rgba(0, 0, 0, 0.1);
}
header nav a { color: #fff; display: inline-block; padding: 10px 15px; line-height: 1; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
header nav a:hover { -moz-box-shadow: 0 0 0 1px #fff; -webkit-box-shadow: 0 0 0 1px #fff; box-shadow: 0 0 0 1px #fff;
}
h2 { font-size: 34px; text-transform: uppercase; font-weight: 100; line-height: 2; color: #2c3e50;
}
p { margin-bottom: 2rem; line-height: 2; color: #7f8c8d;
}
.wrapper { width: 800px; margin: 0 auto;
}
section { padding: 20px; margin-bottom: 40px; background-color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
/* Sticky Header Style */
/* ---------------------------------------- */
body.sticky-header { padding-top: 100px;
}
body.sticky-header header { height: 60px; background-color: rgba(52, 152, 219, 0.9);
}
body.sticky-header header h1 { -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0);
}
Stick Header Pow! - Script Codes JS Codes
$(function(){ $(window).scroll(function(){ var winTop = $(window).scrollTop(); if(winTop >= 30){ $("body").addClass("sticky-header"); }else{ $("body").removeClass("sticky-header"); }//if-else });//win func.
});//ready func.
Developer | Boyd Massie |
Username | massiebn |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 3,342 Kb |
Views | 50,600 |
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 |
Snow Falling JS | 7,771 Kb |
Background Video | 1,806 Kb |
Image Hover | 2,622 Kb |
Responsive Dropdown Menu | 3,922 Kb |
Fancy Image Showcase With Timer Bar | 10,579 Kb |
JQuery Quiz | 3,872 Kb |
Responsive Tournament Bracket | 1,873 Kb |
JQuery Popeye Gallery | 6,817 Kb |
Responsive Side Nav Shift | 7,040 Kb |
Countdown Timer | 3,001 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 |
A Pen by Sooba | Sooba | 2,516 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Social buttons | Flacu | 2,022 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!