CSS yapışkan header yapımı

Tuncay

kurucu
Ticaret - 100%
Katılım
28 Haz 2020
Mesajlar
782
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

Moderatör
Ticaret - 100%
Katılım
5 Şub 2021
Mesajlar
203
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