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');
        });