Sticky header örneği
CSS Kodları:
html, body {
margin: 0;
padding: 0;
}
a { text-decoration: none;}
header.navigasyon {
position: fixed;
width: 100%;
height: 110px;
background: #482680;
transition: all .3s ease-in-out;
z-index: 9
}
/* Sticky header kodu */
header.navigasyon.sticky {
position: fixed;
transition: all 0.2s ease-in-out;
height: 80px;
z-index: 9
}
/* Sticky header kodu */
header.navigasyon ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
transition: all .3s ease-in-out
}
header.navigasyon ul li {
list-style-type: none;
display: inline;
}
header.navigasyon ul li a {
color: #ffffff;
padding: 0px 10px;
border-right: 1px solid #ffffff;
}
main {
position: relative;
top: 110px;
height: 120vh;
z-index:1
}
Javascript Kodları:
$(window).scroll(() => {
var windowTop = $(window).scrollTop();
windowTop > 110 ? $('.navigasyon').addClass('sticky') : $('.navigasyon').removeClass('sticky');
windowTop > 110 ? $('main').css('top', '80px') : $('main').css('top', '110px');
});