Playing with fixed header
How do I make an playing with fixed header?
Fixed header playground. Use the style chooser to switch styles for the header to see different scrolling behaviors for every style.. What is a playing with fixed header? How do you make a playing with fixed header? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.
Playing with fixed header Previews
Playing with fixed header - Script Codes HTML Codes
<!DOCTYPE html>
<html class="style1">
<head> <meta charset="UTF-8"> <title>Playing with fixed header</title> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ header { width: 100%; height: 100px; line-height: 100px; background: #eee; font-size: 100px;
}
header.fixed { position: fixed;
}
.logo-wrapper { line-height: 0.8em;
}
.logo-wrapper .logo { cursor: pointer;
}
.logo-wrapper i { display: inline-block; vertical-align: middle; font-size: 0.75em; transition: all 0.2s;
}
.logo-wrapper h1 { display: inline-block; vertical-align: middle; font-size: 0.45em; transition: all 0.2s; margin: 0;
}
.style1-color, .style1 .logo, .style1 [data-style="1"], .style-chooser li[data-style="1"]:hover { color: #FA6900;
}
.style2-color, .style2 .logo, .style2 [data-style="2"], .style-chooser li[data-style="2"]:hover { color: #69D2E7;
}
.style3-color, .style3 .logo, .style3 [data-style="3"], .style-chooser li[data-style="3"]:hover { color: #FE4365;
}
.style4-color, .style4 .logo, .style4 [data-style="4"], .style-chooser li[data-style="4"]:hover { color: #83AF9B;
}
.style1 header.fixed { height: 50px; top: 0; line-height: 50px; font-size: 50px; background: #fff; opacity: 0.75;
}
.style2 header.fixed { display: inline; width: auto; height: 50px; top: 0; left: 0; padding: 0 0.5em 0 0.4em; line-height: 50px; font-size: 50px; background: #fff;
}
.style3 header.fixed { width: 200px; height: 100px; left: 50%; margin-left: -680px; top: 0; padding: 0 0.5em 0 0.4em; line-height: 50px; font-size: 50px; text-align: center; border-bottom-left-radius: 10px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(75%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 75%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 75%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, #ffffff 0%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
}
.style3 header.fixed .logo-wrapper { line-height: 0.5em;
}
.style4 header.fixed { display: inline; width: 400px; height: 50px; top: 0; left: 50%; margin-left: -200px; padding: 0 0.5em 0 0.4em; line-height: 50px; font-size: 50px; text-align: center; opacity: 0.8; background: #fff; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; transition: opacity 0.2s;
}
.style4 header.fixed:hover { opacity: 1;
}
.style-chooser { position: fixed; z-index: 10000; top: 0; right: 0; margin: 0; padding: 0; list-style-type: none; overflow: hidden; background: #222; border-radius: 10px; padding: 10px; opacity: 0.75; margin: 20px;
}
.style-chooser li { float: left; font-size: 1em; padding: 0 5px; width: 100px; height: 100%; text-align: center; cursor: pointer; color: #eee;
}
.style-chooser li:before { content: "Style " attr(data-style); display: inline-block; clear: left;
}
.main, .style1 .logo-wrapper, .style2 header:not(.fixed) > .logo-wrapper, .style3 header:not(.fixed) > .logo-wrapper, .style4 header:not(.fixed) > .logo-wrapper { width: 960px; margin: 0 auto; overflow: hidden;
}
body { font-family: 'Open Sans', sans-serif; background: #eee; margin: 0;
}
* { box-sizing: border-box;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="style-chooser"> <li data-style="1"></li> <li data-style="2"></li> <li data-style="3"></li> <li data-style="4"></li>
</ul>
<header> <section class="logo-wrapper"> <div class="logo"> <i class="icon-globe"></i> <h1>Playing with fixed header</h1> </div> </section>
</header>
<article class="main"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing dictum nulla in lacinia. Integer dictum mi tortor, sed ullamcorper turpis pellentesque eget. Integer scelerisque blandit est sit amet bibendum. Duis luctus sollicitudin aliquet. Sed feugiat porttitor tortor id egestas. Curabitur eget turpis nulla. Proin pretium sed velit sit amet sodales. Vivamus mi eros, scelerisque eget lobortis eget, varius id elit. Quisque facilisis lectus at tellus imperdiet, egestas aliquet est mattis. Ut ullamcorper pulvinar lacus eu aliquam. Sed mattis non lectus eu viverra. Proin vel metus interdum, pellentesque dolor nec, auctor felis. Nullam iaculis risus nulla, in suscipit diam porta ac.</p> <p>Ut cursus mattis varius. Morbi pharetra mi at facilisis facilisis. Vestibulum iaculis volutpat est, vel ultricies enim pulvinar at. Donec ante nisi, tempor sit amet aliquet sit amet, porta laoreet felis. Quisque adipiscing faucibus arcu. Ut gravida est et dolor ullamcorper, ut porttitor risus euismod. Donec at enim id elit ullamcorper consequat. Aliquam in est id erat lobortis blandit. Morbi bibendum massa a molestie rhoncus. Integer tincidunt sit amet augue non mattis.</p> <p>Ut pulvinar, lorem vitae sagittis tempus, urna mi hendrerit neque, et ultricies tortor turpis sed urna. Nullam at libero eu neque scelerisque rhoncus ac in lacus. Morbi vestibulum leo ultrices, feugiat neque ultrices, scelerisque mauris. Fusce semper nec ipsum vitae vehicula. Suspendisse potenti. Pellentesque dignissim accumsan molestie. Proin sollicitudin est leo, eu gravida dolor blandit ut. Suspendisse quam erat, venenatis eu tortor non, ultricies ultricies quam. Ut rutrum blandit magna sit amet condimentum.</p> <p>Nullam volutpat tortor vel mauris elementum, id aliquam justo dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis consequat blandit. Duis a nunc augue. Sed arcu justo, vulputate ornare semper a, interdum vitae odio. Aliquam erat volutpat. Aliquam iaculis tortor eu nulla imperdiet, vulputate pharetra nisl sagittis. Nullam dictum massa ac vulputate tristique. Proin sem libero, dictum et metus ac, lacinia vulputate magna.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur lectus fringilla dolor dictum aliquam. Proin semper elit interdum, porta odio et, tristique sapien. Mauris facilisis imperdiet sodales. Nam auctor eu arcu eget vehicula. Phasellus ultricies, nibh eget placerat aliquam, sapien lacus pharetra ipsum, in ultricies felis lorem sit amet lectus. Curabitur at nisi a velit feugiat accumsan. Cras varius, lorem sed posuere commodo, velit lectus pretium quam, a egestas purus arcu a quam. Mauris lobortis enim gravida nibh tincidunt pretium. Maecenas scelerisque felis turpis, quis accumsan nunc molestie sed. Aenean at nunc leo. Donec sagittis velit neque, eget ornare ante pretium ut. In pellentesque dolor sit amet vulputate dapibus. Aliquam erat volutpat. Donec sapien sapien, ultricies a posuere ut, pulvinar nec ligula. Fusce consequat dolor non purus viverra, eget ultrices orci laoreet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing dictum nulla in lacinia. Integer dictum mi tortor, sed ullamcorper turpis pellentesque eget. Integer scelerisque blandit est sit amet bibendum. Duis luctus sollicitudin aliquet. Sed feugiat porttitor tortor id egestas. Curabitur eget turpis nulla. Proin pretium sed velit sit amet sodales. Vivamus mi eros, scelerisque eget lobortis eget, varius id elit. Quisque facilisis lectus at tellus imperdiet, egestas aliquet est mattis. Ut ullamcorper pulvinar lacus eu aliquam. Sed mattis non lectus eu viverra. Proin vel metus interdum, pellentesque dolor nec, auctor felis. Nullam iaculis risus nulla, in suscipit diam porta ac.</p> <p>Ut cursus mattis varius. Morbi pharetra mi at facilisis facilisis. Vestibulum iaculis volutpat est, vel ultricies enim pulvinar at. Donec ante nisi, tempor sit amet aliquet sit amet, porta laoreet felis. Quisque adipiscing faucibus arcu. Ut gravida est et dolor ullamcorper, ut porttitor risus euismod. Donec at enim id elit ullamcorper consequat. Aliquam in est id erat lobortis blandit. Morbi bibendum massa a molestie rhoncus. Integer tincidunt sit amet augue non mattis.</p> <p>Ut pulvinar, lorem vitae sagittis tempus, urna mi hendrerit neque, et ultricies tortor turpis sed urna. Nullam at libero eu neque scelerisque rhoncus ac in lacus. Morbi vestibulum leo ultrices, feugiat neque ultrices, scelerisque mauris. Fusce semper nec ipsum vitae vehicula. Suspendisse potenti. Pellentesque dignissim accumsan molestie. Proin sollicitudin est leo, eu gravida dolor blandit ut. Suspendisse quam erat, venenatis eu tortor non, ultricies ultricies quam. Ut rutrum blandit magna sit amet condimentum.</p> <p>Nullam volutpat tortor vel mauris elementum, id aliquam justo dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis consequat blandit. Duis a nunc augue. Sed arcu justo, vulputate ornare semper a, interdum vitae odio. Aliquam erat volutpat. Aliquam iaculis tortor eu nulla imperdiet, vulputate pharetra nisl sagittis. Nullam dictum massa ac vulputate tristique. Proin sem libero, dictum et metus ac, lacinia vulputate magna.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur lectus fringilla dolor dictum aliquam. Proin semper elit interdum, porta odio et, tristique sapien. Mauris facilisis imperdiet sodales. Nam auctor eu arcu eget vehicula. Phasellus ultricies, nibh eget placerat aliquam, sapien lacus pharetra ipsum, in ultricies felis lorem sit amet lectus. Curabitur at nisi a velit feugiat accumsan. Cras varius, lorem sed posuere commodo, velit lectus pretium quam, a egestas purus arcu a quam. Mauris lobortis enim gravida nibh tincidunt pretium. Maecenas scelerisque felis turpis, quis accumsan nunc molestie sed. Aenean at nunc leo. Donec sagittis velit neque, eget ornare ante pretium ut. In pellentesque dolor sit amet vulputate dapibus. Aliquam erat volutpat. Donec sapien sapien, ultricies a posuere ut, pulvinar nec ligula. Fusce consequat dolor non purus viverra, eget ultrices orci laoreet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing dictum nulla in lacinia. Integer dictum mi tortor, sed ullamcorper turpis pellentesque eget. Integer scelerisque blandit est sit amet bibendum. Duis luctus sollicitudin aliquet. Sed feugiat porttitor tortor id egestas. Curabitur eget turpis nulla. Proin pretium sed velit sit amet sodales. Vivamus mi eros, scelerisque eget lobortis eget, varius id elit. Quisque facilisis lectus at tellus imperdiet, egestas aliquet est mattis. Ut ullamcorper pulvinar lacus eu aliquam. Sed mattis non lectus eu viverra. Proin vel metus interdum, pellentesque dolor nec, auctor felis. Nullam iaculis risus nulla, in suscipit diam porta ac.</p> <p>Ut cursus mattis varius. Morbi pharetra mi at facilisis facilisis. Vestibulum iaculis volutpat est, vel ultricies enim pulvinar at. Donec ante nisi, tempor sit amet aliquet sit amet, porta laoreet felis. Quisque adipiscing faucibus arcu. Ut gravida est et dolor ullamcorper, ut porttitor risus euismod. Donec at enim id elit ullamcorper consequat. Aliquam in est id erat lobortis blandit. Morbi bibendum massa a molestie rhoncus. Integer tincidunt sit amet augue non mattis.</p> <p>Ut pulvinar, lorem vitae sagittis tempus, urna mi hendrerit neque, et ultricies tortor turpis sed urna. Nullam at libero eu neque scelerisque rhoncus ac in lacus. Morbi vestibulum leo ultrices, feugiat neque ultrices, scelerisque mauris. Fusce semper nec ipsum vitae vehicula. Suspendisse potenti. Pellentesque dignissim accumsan molestie. Proin sollicitudin est leo, eu gravida dolor blandit ut. Suspendisse quam erat, venenatis eu tortor non, ultricies ultricies quam. Ut rutrum blandit magna sit amet condimentum.</p> <p>Nullam volutpat tortor vel mauris elementum, id aliquam justo dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis consequat blandit. Duis a nunc augue. Sed arcu justo, vulputate ornare semper a, interdum vitae odio. Aliquam erat volutpat. Aliquam iaculis tortor eu nulla imperdiet, vulputate pharetra nisl sagittis. Nullam dictum massa ac vulputate tristique. Proin sem libero, dictum et metus ac, lacinia vulputate magna.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur lectus fringilla dolor dictum aliquam. Proin semper elit interdum, porta odio et, tristique sapien. Mauris facilisis imperdiet sodales. Nam auctor eu arcu eget vehicula. Phasellus ultricies, nibh eget placerat aliquam, sapien lacus pharetra ipsum, in ultricies felis lorem sit amet lectus. Curabitur at nisi a velit feugiat accumsan. Cras varius, lorem sed posuere commodo, velit lectus pretium quam, a egestas purus arcu a quam. Mauris lobortis enim gravida nibh tincidunt pretium. Maecenas scelerisque felis turpis, quis accumsan nunc molestie sed. Aenean at nunc leo. Donec sagittis velit neque, eget ornare ante pretium ut. In pellentesque dolor sit amet vulputate dapibus. Aliquam erat volutpat. Donec sapien sapien, ultricies a posuere ut, pulvinar nec ligula. Fusce consequat dolor non purus viverra, eget ultrices orci laoreet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing dictum nulla in lacinia. Integer dictum mi tortor, sed ullamcorper turpis pellentesque eget. Integer scelerisque blandit est sit amet bibendum. Duis luctus sollicitudin aliquet. Sed feugiat porttitor tortor id egestas. Curabitur eget turpis nulla. Proin pretium sed velit sit amet sodales. Vivamus mi eros, scelerisque eget lobortis eget, varius id elit. Quisque facilisis lectus at tellus imperdiet, egestas aliquet est mattis. Ut ullamcorper pulvinar lacus eu aliquam. Sed mattis non lectus eu viverra. Proin vel metus interdum, pellentesque dolor nec, auctor felis. Nullam iaculis risus nulla, in suscipit diam porta ac.</p> <p>Ut cursus mattis varius. Morbi pharetra mi at facilisis facilisis. Vestibulum iaculis volutpat est, vel ultricies enim pulvinar at. Donec ante nisi, tempor sit amet aliquet sit amet, porta laoreet felis. Quisque adipiscing faucibus arcu. Ut gravida est et dolor ullamcorper, ut porttitor risus euismod. Donec at enim id elit ullamcorper consequat. Aliquam in est id erat lobortis blandit. Morbi bibendum massa a molestie rhoncus. Integer tincidunt sit amet augue non mattis.</p> <p>Ut pulvinar, lorem vitae sagittis tempus, urna mi hendrerit neque, et ultricies tortor turpis sed urna. Nullam at libero eu neque scelerisque rhoncus ac in lacus. Morbi vestibulum leo ultrices, feugiat neque ultrices, scelerisque mauris. Fusce semper nec ipsum vitae vehicula. Suspendisse potenti. Pellentesque dignissim accumsan molestie. Proin sollicitudin est leo, eu gravida dolor blandit ut. Suspendisse quam erat, venenatis eu tortor non, ultricies ultricies quam. Ut rutrum blandit magna sit amet condimentum.</p> <p>Nullam volutpat tortor vel mauris elementum, id aliquam justo dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis consequat blandit. Duis a nunc augue. Sed arcu justo, vulputate ornare semper a, interdum vitae odio. Aliquam erat volutpat. Aliquam iaculis tortor eu nulla imperdiet, vulputate pharetra nisl sagittis. Nullam dictum massa ac vulputate tristique. Proin sem libero, dictum et metus ac, lacinia vulputate magna.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur lectus fringilla dolor dictum aliquam. Proin semper elit interdum, porta odio et, tristique sapien. Mauris facilisis imperdiet sodales. Nam auctor eu arcu eget vehicula. Phasellus ultricies, nibh eget placerat aliquam, sapien lacus pharetra ipsum, in ultricies felis lorem sit amet lectus. Curabitur at nisi a velit feugiat accumsan. Cras varius, lorem sed posuere commodo, velit lectus pretium quam, a egestas purus arcu a quam. Mauris lobortis enim gravida nibh tincidunt pretium. Maecenas scelerisque felis turpis, quis accumsan nunc molestie sed. Aenean at nunc leo. Donec sagittis velit neque, eget ornare ante pretium ut. In pellentesque dolor sit amet vulputate dapibus. Aliquam erat volutpat. Donec sapien sapien, ultricies a posuere ut, pulvinar nec ligula. Fusce consequat dolor non purus viverra, eget ultrices orci laoreet.</p>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Playing with fixed header - Script Codes CSS Codes
header { width: 100%; height: 100px; line-height: 100px; background: #eee; font-size: 100px;
}
header.fixed { position: fixed;
}
.logo-wrapper { line-height: 0.8em;
}
.logo-wrapper .logo { cursor: pointer;
}
.logo-wrapper i { display: inline-block; vertical-align: middle; font-size: 0.75em; transition: all 0.2s;
}
.logo-wrapper h1 { display: inline-block; vertical-align: middle; font-size: 0.45em; transition: all 0.2s; margin: 0;
}
.style1-color, .style1 .logo, .style1 [data-style="1"], .style-chooser li[data-style="1"]:hover { color: #FA6900;
}
.style2-color, .style2 .logo, .style2 [data-style="2"], .style-chooser li[data-style="2"]:hover { color: #69D2E7;
}
.style3-color, .style3 .logo, .style3 [data-style="3"], .style-chooser li[data-style="3"]:hover { color: #FE4365;
}
.style4-color, .style4 .logo, .style4 [data-style="4"], .style-chooser li[data-style="4"]:hover { color: #83AF9B;
}
.style1 header.fixed { height: 50px; top: 0; line-height: 50px; font-size: 50px; background: #fff; opacity: 0.75;
}
.style2 header.fixed { display: inline; width: auto; height: 50px; top: 0; left: 0; padding: 0 0.5em 0 0.4em; line-height: 50px; font-size: 50px; background: #fff;
}
.style3 header.fixed { width: 200px; height: 100px; left: 50%; margin-left: -680px; top: 0; padding: 0 0.5em 0 0.4em; line-height: 50px; font-size: 50px; text-align: center; border-bottom-left-radius: 10px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(75%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 75%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 75%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, #ffffff 0%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
}
.style3 header.fixed .logo-wrapper { line-height: 0.5em;
}
.style4 header.fixed { display: inline; width: 400px; height: 50px; top: 0; left: 50%; margin-left: -200px; padding: 0 0.5em 0 0.4em; line-height: 50px; font-size: 50px; text-align: center; opacity: 0.8; background: #fff; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; transition: opacity 0.2s;
}
.style4 header.fixed:hover { opacity: 1;
}
.style-chooser { position: fixed; z-index: 10000; top: 0; right: 0; margin: 0; padding: 0; list-style-type: none; overflow: hidden; background: #222; border-radius: 10px; padding: 10px; opacity: 0.75; margin: 20px;
}
.style-chooser li { float: left; font-size: 1em; padding: 0 5px; width: 100px; height: 100%; text-align: center; cursor: pointer; color: #eee;
}
.style-chooser li:before { content: "Style " attr(data-style); display: inline-block; clear: left;
}
.main, .style1 .logo-wrapper, .style2 header:not(.fixed) > .logo-wrapper, .style3 header:not(.fixed) > .logo-wrapper, .style4 header:not(.fixed) > .logo-wrapper { width: 960px; margin: 0 auto; overflow: hidden;
}
body { font-family: 'Open Sans', sans-serif; background: #eee; margin: 0;
}
* { box-sizing: border-box;
}
Playing with fixed header - Script Codes JS Codes
$(window).scroll(function(e) { var scrollTop = window.scrollY; if (scrollTop > 0) { $('header:not(.fixed)').addClass('fixed'); } else { $('header.fixed').removeClass('fixed'); }
});
$(document).ready(function() { $('.logo').on('click', function() { scrollToTop(); }); $('[data-style]').on('click', function() { scrollToTop((function(style) { return function() { setHeaderStyle(style); }; })($(this).attr('data-style'))); });
});
function scrollToTop(callback) { $("html, body").animate({ scrollTop: "0" }, 200, callback);
}
function setHeaderStyle(style) { $('html').removeClass('style1 style2 style3 style4').addClass('style'+style);
}
| Developer | Yogev Ahuvia |
| Username | kindofone |
| Uploaded | September 11, 2022 |
| Rating | 3.5 |
| Size | 7,296 Kb |
| Views | 30,360 |
Do you need developer help for Playing with fixed header?
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!
Yogev Ahuvia (kindofone) Script Codes
| Name | Size |
| Ball Bouncing On Text | 5,553 Kb |
| The CodePen Logo | 4,259 Kb |
| Triangles From Another Dimension | 15,606 Kb |
| Real-Time Love Meter | 5,493 Kb |
| Tears Of Happiness | 3,667 Kb |
| A Pen by Yogev Ahuvia | 1,941 Kb |
| Humble Progress | 2,766 Kb |
| Thumbnail Animation Effects | 10,393 Kb |
| Bouncy Icon Select Menu | 6,673 Kb |
| Subtle Buttons | 4,010 Kb |
Create amazing SEO content 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 |
| Simple checkbox style | Vncnz | 2,628 Kb |
| Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
| A Pen by Tosh | Panev | 2,586 Kb |
| Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
| CSS Donut Charts | Seanstopnik | 2,908 Kb |
| Pure CSS Tooltip | APinix | 2,815 Kb |
| See Through | Larrygeams | 77,410 Kb |
| Sketchy Box | Mnicpt | 3,033 Kb |
| CSS Grid Overlay | Cliffpyles | 3,090 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 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!