Skip to content

Instantly share code, notes, and snippets.

@onuproy
Created October 26, 2019 20:06
Show Gist options
  • Save onuproy/44010344285f0e6e751edad368f2ac94 to your computer and use it in GitHub Desktop.
Save onuproy/44010344285f0e6e751edad368f2ac94 to your computer and use it in GitHub Desktop.
Sticky Header fixed
<section class="header_logo">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="logo">
<a href="index.html">
<img src="assets/images/LOGO.png" alt="logo">
</a>
</div>
</div>
<div class="col-md-6">
<div class="search_box">
<form action="">
<div class="f_input">
<input type="text" placeholder="Enter product name or code">
</div>
<div class="search_btn">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
$(document).ready(function(){
// Sticky Header
$(window).scroll(function(){
var a= $(window).scrollTop();
if(a>200){
$('.header_logo').addClass('top-fixt');
}
else{
$('.header_logo').removeClass('top-fixt');
}
});
});
.top-fixt {
width: 100%;
position: fixed !important;
top: 0;
z-index: 99990;
padding-top: 10px;
padding-bottom: 10px;
-webkit-transition: all .5s;
transition: all .5s;
background-color: #009957;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
border-color: #fff;
-webkit-animation: slide-down 0.5s;
animation: slide-down 0.5s;
}
@-webkit-keyframes slide-down {
0% {
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
opacity: 0.9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slide-down {
0% {
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
opacity: 0.9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@onuproy
Copy link
Author

onuproy commented Aug 25, 2020

Really nice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment