Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
jQuery ile Sticky Uygulaması

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

Sosyal Hesabında Paylaş

2386 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2021 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.