Merhaba Arkadaşlar,

jQuery ile Sticky ugulamasına değineceğim.. nedir bu sticky web sitenizde aşağıya doğru kaydırma çubuğuyla indiğinizde sizin istediğiniz alanında sabit bir şekilde aşağıya gelmesini sağlamak.

Bu örneği bizim sitede de yaptım fakat kullanmadık belli ilerleyen günlerde tekrar aktif ederim.

şimdi örneğimize geçelim...

ilk olarak sayfamıza jQuery kütüphanesini ekliyoruz. bunu siz ister dışardan alırsınız ister sizde vardır onu direk eklersiniz orası size kalmış bir durum.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ardından bizim sticky kütüphanesini ekliyoruz. makale sonunda zaten bu uygulama dosyalarının hepsini ekleyeceğim onun içinde de bunlar bulunmaktadır.

 <script type="text/javascript" src="jquery.sticky.js"></script>

şimdi sticky kütüphanesini tetikleyecek fonksiyonumuzu yazalım.

 <script>
    $(window).load(function(){
      $("#ustmenu").sticky({ topSpacing: 0, center:true });
    });
  </script>

ben yukarıdaki kodda #ustmenu diyerek kendi sitemizde bulunan <div id="ustmenu"> </div> taglarını kapsamasını sağladım. bu olay sizin sitenizde hangi alanı kapsayacağınıza göre değişir.

topSpacing kısmı 0 olarak verildi çünkü sayfa aşağı kayınca en üstte yapışmasını istiyorum.

center:true ise tahmin edebileceğiniz gibi sayfanın sağında veya solunda değil ortasında gelmesini istediğim için

benim sitemdeki örnek kod yapım

öncelikle css im

<style type="text/css">

     #ustmenu
 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	height: 50px;
	line-height: 50px;
	color: #FFF;
	background-color: #000;
	text-align: center;
  }

</style>

daha sonra div yapım

 <div id="ustmenu">
           bu alan her zaman üstte gelecek kısımdır.

        </div>

yukarıdaki yapıma göre sitemizde bulunan üst menü kısmı sayfa aşağıya da kaydırılsa devamlı en üstte yapışık olarak gelecek alanımdır.

Proje Dosyası : Google drive üzerinden indirme linki - google drive yi açtıktan sonra sol üstte bulunandosya menüsünden indir diyerek projeyi bilgisayarınıza indirebilirsiniz.

Bir sonraki makalede görüşmek dileğiyle...

Veysel APARI

Veysel APARI

2386 görüntüleme

jQuery

Yorumlar

Adınız Soyadınız

Mail Adresiniz

Doğrulama Kodu