Aşağıya inince küçülen div? |
3 Mesajlar | 3.980 Okunma | ||
- Üyelik 08.03.2014
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum İstanbul Anadolu
- Ad Soyad E** G**
- Mesajlar 1066
- Beğeniler 192 / 189
- Ticaret 26, (%100)
Morhipo nun sitesindeki gibi mesela belli bir px aşağıya kayınca header kısmının belli bir oranda küçülmesini istiyorum. Bu nasıl yapılabilir, css ile olur mu?
InfiniTheme Profesyonel Magazin - Teknoloji Wordpress Teması Çıktı (Konularımdan ulaşabilirsiniz.)
- Üyelik 30.01.2012
- Yaş/Cinsiyet - /
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 2434
- Beğeniler 686 / 1151
- Ticaret 1, (%100)
Zor bir şey değil aslında. jQuery scrollTop özelliği ile yapılabilir.
Denemedim ama şöyle bir şeyin işe yaraması lazım;
Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.
Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}
http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.
Yani çalışma mantığı bu.
Denemedim ama şöyle bir şeyin işe yaraması lazım;
$(window).scroll(function(){
if($(this).scrollTop()>300){ /* 300 px aşağı kayınca aktif olur */
$( "#header" ).addClass( "header_ufalt" );
}
else{
$( "#header" ).removeClass( "header_ufalt" );
}
});
Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.
Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}
http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.
Yani çalışma mantığı bu.
- Üyelik 08.03.2014
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum İstanbul Anadolu
- Ad Soyad E** G**
- Mesajlar 1066
- Beğeniler 192 / 189
- Ticaret 26, (%100)
Zor bir şey değil aslında. jQuery scrollTop özelliği ile yapılabilir.
Denemedim ama şöyle bir şeyin işe yaraması lazım;
Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.
Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}
http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.
Yani çalışma mantığı bu.
Denemedim ama şöyle bir şeyin işe yaraması lazım;
$(window).scroll(function(){
if($(this).scrollTop()>300){ /* 300 px aşağı kayınca aktif olur */
$( "#header" ).addClass( "header_ufalt" );
}
else{
$( "#header" ).removeClass( "header_ufalt" );
}
});
Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.
Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}
http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.
Yani çalışma mantığı bu.
Çok sağolun en yakın zamanda deneyeceğim.
Ek Olarak:
Zor bir şey değil aslında. jQuery scrollTop özelliği ile yapılabilir.
Denemedim ama şöyle bir şeyin işe yaraması lazım;
Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.
Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}
http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.
Yani çalışma mantığı bu.
Denemedim ama şöyle bir şeyin işe yaraması lazım;
$(window).scroll(function(){
if($(this).scrollTop()>300){ /* 300 px aşağı kayınca aktif olur */
$( "#header" ).addClass( "header_ufalt" );
}
else{
$( "#header" ).removeClass( "header_ufalt" );
}
});
Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.
Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}
http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.
Yani çalışma mantığı bu.
Dediğinizi yapıyorum jsyi kısmına koyuyorum olmuyor ayrıca wordpress üzerinden functions.php ye koyuyorum hep hata veriyor. Başına koyduğum halde.
InfiniTheme Profesyonel Magazin - Teknoloji Wordpress Teması Çıktı (Konularımdan ulaşabilirsiniz.)
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)