Bu yazımızda, JQuery ile nesnelerin ölçülerine ve pozisyonlarına ulaşma ve değiştirme fonksiyonlarını inceleyeceğiz ve sabit (fixed) alan uygulaması yapacağız, normal "css fixed" yerine, yapışkan (sticky) alan olarak tanımlanan bir uygulama olacak, sayfa aşağı yukarı hareket ettitkçe sabit alanımız animasyonla aynı konumuna gelecek.
Dom Nesneleri Ölçü Fonksiyonları:
- .width(): //Nesnenin genişliğini öğrenip değiştirmeye yarar.
- .height(): //Nesnenin yüksekliğini öğrenip değiştirmeye yarar.
- .innerWidth(): //Nesnenin genişliğine padding eklenmiş değeri verir.
- .innerHeight(): //Nesnenin yüksekliğine padding eklenmiş değeri verir.
- .outerWidth(): //Nesnenin genişliğine padding ve border eklenmiş değeri verir.
- .outerHeight(): //Nesnenin yüksekliğine padding ve border eklenmiş değeri verir.
Dom Nesneleri Pozisyon Fonksiyonları:
- .offset(): //Nesnenin sol(left) ve üst(top) değerlerine göre koordinatları alınır ve değiştirilir
- .position(): //Nesnenin bir üst düzey nesnesine göre koordinatları alınır ve değiştirilir.
- .scrollTop(): //Dikey kaydırma çubuğunun üstten pozisyon değeri alınır veya değiştirilir.
- .scrollLeft(): //Yatay kaydırma çubuğunun soldan pozisyon değeri alınır veya değiştirilir.
Uygulama:
Bu uygulamamızda sayfamızın en üst kısmındaki alanı (ki siz istediğiniz yere yerleştirip uygulayabilirsiniz) reklam alanının (Veya sayfanızın ana menüsünün ve logosunun bulunduğu alan neden olmasın...) sayfa kaydırıldıkça, değişmeyecek şekilde bir animasyon ile tekrar aynı yerine gelmesini sağlayacağız.
Sayfanın başındaki (Başlığın olduğu yer) "siyah bant" animasyonumuzun uygulanacağı alandır, animasyonu görmek için, sayfayı aşağıya doğru kaydırın. Bu sistemi websitenizin en tepesine, sağına soluna veya altına uygulamanız da mümkün tabii.
BU ALAN SAYFAMIZIN EN TEPESİNDE YER ALACAK VE REKLAM ALANI OLARAK KULLANILACAK...
CSS yapısı:
#area_product{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
background:black;
color:white;
}
HTML yapısı:
<div id="area_product">
<div id="banner_text">BU ALAN SAYFAMIZIN EN TEPESİNDE YER ALACAK VE REKLAM ALANI OLARAK KULLANILACAK...</div>
</div>
JQuery Kodları:
<script type="text/javascript">
$(document).ready(function(){
//Siyah bantın opacity değerini değiştiriyoruz
$("#area_product").css({
opacity:0.85
});
//Sayfa kaydrıldığında .scroll() olayı tetikleniyor
$(window).scroll(function(){
//Sayfanın üsten uzaklığı alınıyor
var scroll_top=$(window).scrollTop();
//Sayfanın üstten kaydırma değeri 10'dan büyükse işlem yapılacak
if($(this).scrollTop()>10){
//Siyah bantın üst değeri(top) animasyon ile belirtiliyor
$("#area_product").animate({
top:scroll_top
},30);
}else if($(this).scrollTop()<10){//Sayfanın üstten kaydırma değeri
$("#area_product").animate({ //10'dan küçükse bantın üst değeri
top:0 //"0" olarak belirleniyor işlem
},100);
}
});
});
</script>
Açıklamalar:
Gerekli açıklamalar kodların üzerinde yapılmıştır.
- 6. Not: Bantın "opacity" değeri değiştiriliyor, bunu css üzerinde yapmak da mümkün tabii...
Kolay gelsin, görüşmek üzere...
