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
Sitemizde modülün hemen altına eklememiz gereken javascript kodları
Html veya php dosyamız üzerinde çağırmamız gereken kodlar
Ek olarak mevcut ayarlı fontu kullanmak için <head> tagları arasına bunu ekleyin
Demoya
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;
}
Kod:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("yapiskan");
}
else{
$('header').removeClass("yapiskan");
}
});
</script>
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>
Kod:
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>Demoya
Linki Görmek için Lütfen
Giriş yap veya üye ol.
bakabilir, dosyaların tek bir html dosyası içerisinde derlenmiş halini
Linki Görmek için Lütfen
Giriş yap veya üye ol.
indirebilirsiniz.
