Yaklaşık 10.000.000.000 hücre ve (0.31) yaşında

Sticky menu yapımı CSS + Javascript

Sticky menu yapımı

Sticky header yani yukarıda yapışkan menü yapımı için kullanabileceğiniz alternatif bir yöntemi sizlerle paylaşıyorum. Dilediğiniz şekilde değiştirebilir ve kullanabilirsiniz. Header üzerinde plugin kullanmadan kolay bir şekilde yapışkan (sticky) menü yapabilirsiniz.

Örnek sticky menu demosunu incelemek için buraya tıklayınız.

CSS Kodu:

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 kodu:


//Header On Scroll Functionality
$(window).scroll(() => {
var windowTop = $(window).scrollTop();
windowTop > 110 ? $('.navigasyon').addClass('sticky') : $('.navigasyon').removeClass('sticky');
windowTop > 110 ? $('main').css('top', '80px') : $('main').css('top', '110px');
});