CSS yapışkan header yapımı

Zor Çocuk

Moderatör
Değerlendirme - 100%
Katılım
4 Yıl 5 Ay 28 Gün
Mesajlar
884
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


CSS:
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ı

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

Kod:
<!-- Ü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

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

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

DAMAR

Üye
Değerlendirme - 100%
Katılım
3 Yıl 10 Ay 21 Gün
Mesajlar
184
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


CSS:
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ı

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

Kod:
<!-- Ü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

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

Demoya bakabilir, dosyaların tek bir html dosyası içerisinde derlenmiş halini indirebilirsiniz.
Eline Sağlık
 

Bu konuyu görüntüleyen kullanıcılar

Üst Alt