CSS yapışkan header yapımı

  • Konbuyu başlatan
  • AdminCP
  • #1

Tuncay

kurucu
Katılım
28 Haz 2020
Mesajlar
702
Tepkime puanı
436
Puanları
67
Ticaret - 100%    
4   0   0
Konum
Türkiye
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
Katılım
5 Şub 2021
Mesajlar
181
Tepkime puanı
92
Puanları
28
Ticaret - 100%    
1   0   0
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