CSS yapışkan header yapımı

9 yıl önce #calismalar

Hemen hemen responsive tasarımların vazgeçilmezlerinden olan sticky header, bizim tabirimiz ile yapışkan header yapımını anlatacağım. Bunun için .css ve .js kütüphanesinden yardım alacağız.

Mevcut .css uzantılı dosyamız içerisine eklememiz gereken değerler

   
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
        
        
        header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.yapiskan {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }

Sitemizde modülün hemen altına eklememiz gereken javascript kodları

<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("yapiskan");
    }
    else{
        $('header').removeClass("yapiskan");
    }
});
</script>

Html veya php dosyamız üzerinde çağırmamız gereken kodlar

<!-- Üst Alan -->
<header><h1>Yapışkan Header</h1></header>
    
<!-- Örnek resimin gösterildiği alan -->
<img src="large-image.jpg" width="782" height="2000" alt="Büyük Resim"/>

<!-- Aktarmamız gereken js dosyası -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Ek olarak mevcut ayarlı fontu kullanmak için <head> tagları arasına bunu ekleyin

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

Demoya buradan bakabilir, dosyaların tek bir html dosyası içerisinde derlenmiş halini buradan indirebilirsiniz.

HAKKIMDA

ETİKETLER

CSS yapışkan header yapımı

internete dair her şey