javascript ile scroll takibi ve statik olarak objelerin atanması

21 Kasım 2013 "kullanışlı bir javascript paylaşıyorum. javascript ile ekranı dinleyip, belirli noktaları geçtiginde scroll ettiginde statik olarak objeleri fixleyebilirsiniz."

öncelikle, yapmamız gereken şey, sürekli olarak ekranı dinlemek. zira kullanıcının ne zaman scroll edecegini bilemeyiz.
yani bir fonksiyon çagıracagız ve mantıklı sürelerde ekrandaki scroll (ekranı kaydırma) hareketlerini dinleyecek.

aşagıdaki scriptin setInterval fonksiyonu da bunu yapıyor, her 250 milisaniyede, içerisindeki kontrolleri yeniden çalıştırıyor.
gerekli görürse ilgili işlemleri yapıyor.

did_scroll parametresi de her işlemden sonra yeniden false pozisyonuna donuyor ki yeni bir iş geldiginde kendisini yeniden tetikleyebilsin.

statik_alan olarak belirlediğim bir alanı gecmeden hemen önce scroll işi devreye giriyor ve kolonu statik hale getiriyorum.
bu noktanın üzerine geldiginde ise, statik olma özelliğini iptal ediyorum, böylece sayfa header'ının üzerine çıkıp çakışma yapmıyor.
aynı şeyi klonlayıp sayfa footerı içinde kullanabilirsiniz.

statik olarak atamak istediğiniz objenin class adını statikAlan eklemeniz ve hemen içerisine bir span acıp classını statikAlan olarak değiştirmeniz yeterlidir.

/* scroll islemleri */

var did_scroll = false;
var statik_alan = $("div.statikAlan");
var statik_alan_poziyonu = $("span.statikAlan").offset();
$(window).scroll(function() {
did_scroll = true;
});
setInterval(function() {

if(did_scroll) {

did_scroll = false;

//ekran fiziksel boyutuna göre özel bir iş yapılacaksa asagıdaki commenti kaldırıp buraya ekleyebilirsiniz
var efektif_yukseklik = $(window).height();
//alert(efektif_yukseklik);
//if(efektif_yukseklik >550){
//
//}


var top_pixel_height = $(window).scrollTop();
if((top_pixel_height+26) > statik_alan_poziyonu.top){
statik_alan.css({'position' : 'fixed' , 'top' : '10px'});
} else {
statik_alan.css({'position' : 'static'});
}

}
}, 250);

umarım işinize yarar, kolay gelsin :)

javascript-ile-scroll-takibi-ve-statik-olarak-objelerin-atanmasi image

Yazar Hakkında
FatihYILMAZ "Duyurmaya değer bir şey yapmıyor, ya da yaptıkları çok gizli, duyurmak istemiyor." Yazara Ait Diğer Yazılar
İlginizi Çekebilecek Diğer Yazılar
phantomjs kurulum ve ögrenim notlarıEskiden çok zor olan bir çok şeyi, kolay yoldan yapabilmemizi saglayan phantomjs kurulum ve ögretim notları.
Yorumlar Yorum Ekle
Yorum yazabilmek için, Yeni Kayıt Oluşturun veya Site Girişi Yapın




Tüm Liste »

Son Gönderilen 20 Yazı

ajax kod örnegi - finans servisi tooltip için Borsa notları - Bireysel Yatırımcı Psikolojisi borsa notları - aselsan cloudflare ve api ile otomatik dns kaydi guncelleme mRemoteNG config dosyası confCons.xml yerini değiştirmek için macos memcached kurmak ve php ile memcache baglantisi saglamak gram altın değeri euro cinsinden nasıl hesaplanır? dolar ve türk lirası ol laravel 5 - config ayarları olmadan birden çok veritabanına bağlanmak Yunan Krizi Son Durum - Maliye Bakanlari Anlaşamadi - Liderler toplantisi iptal 18.06.2014 - 19.06.2015: borsa istanbul, Foreks dolar ve euro için takip notlar nodejs kurulum notları Circle Spike Run - Yeni ücretsiz Android Oyunu opel corsa için bazı kullanışlı ayarlar Tap Cowboy - Ücretsiz Android Mobil Telefon Oyunu - Kovboy Oyunu sevenlere mac os kullanirken ntfs dosya sistemine yazmak TP-LINK modemde port açmak - tum adsl modemlerde gecerli yontem Bolt CMS (içerik yönetim sistemi) nedir,asıl kurulur? Detaylarla anlatıyorum Çalışma günleri 5 günden 4 güne düşürülecek. MySQL veritabanında para değerlerini hangi kolon tipinde tutmalı? Çok kullanılan, işinize yarayacak temel Linux komutları

Popüler Yazılar

CNBC-E 'de Twitter Çılgınlığına Katıldı Legend and Killers'in Detayları Belli Oldu Rise of the Godslayer oyuncuları çağırıyor David Cage'in Chronicles Üzüntüsü Call of Duty: Black Ops dan yeni ekran görüntüleri IBM'in Tercihi Firefox "Her Evde 3D TV Olacak" Mafia 2'nin İlk Yapımcı Günlüğü Ortaya Çıktı FIFA Manager 11 Duyuruldu "Blu-ray Kaybedecek" Sin City 2 Baştan Yazılıyor Civilization V Collector's Edition paketi Ölü doğan cep telefonları Crysis 2 Collector's Edition Dragon Age 2 den yeni ekran görüntüleri

En Yeni Videolar

Çin malı cep telefonlarına IMEI kopyalama - IMEI Yedekleme Arch Enemy İstanbulda - 27 Ocak 2012 Karanlık Saat (The Darkest Hour) VİZYONDA! 2012 Eurovision Temsilcimiz CAN BONOMO! Film önerisi: Duplicity - Sahtekarlar Türkçe Adsense Resmi Youtube Kanalı açıldı. Nasıl iPhone kullanarak, windows laptop internete bağlanır? En Populer iPhone Oyunları: Fruit Ninja, Plants vs Zombies, Angry Birds - I ABIT 'den Kol Saati ve Cep Telefonu Bir Arada. RailGun silahları gerçek oluyor. Google Earth 6 duyuruldu, artık ağaçlar bile 3 boyutlu. iPhone ve İnternet Adres Sorunu Crysis 2'ye Yeni Tarih FIFA 11 için Yeni Tanıtım Videosu Yayınlandı Street Fighter ve Tekken Sonunda Bir Araya Geliyor

En Son Yorumlar

» GokhanYILMAZ@22:21: "hey gidi"
» FatihYILMAZ@12:35: "steve jobs öldü belki ama mirası yükselmeye devam ediyor. "
» paranoiahasu@19:19: "Eklenti seçenekleri biraz daha fazla olsa, kullanıcılarının bü..."
» Silphatos@19:02: "güzel olmuş, severim richard abimi. artık şatoya kat çeker para..."
» paranoiahasu@13:28: "beklentilerin gerisinde olan getiriler şirketler için zarar olmuş..."
» CeUn@11:42: "hem "kar" yapıp hem zarar etmek nasıl oluyor acaba.."
» paranoiahasu@16:25: "Core i7 serisinin ısınma sorununa da bir çare bulurlar umarım. S..."
» FatihYILMAZ@14:06: "BP battıkca batıyor be. bu nedir şimdi yani."
» paranoiahasu@02:25: "güçlü işlemci ve ram seçeneği ile bu tür telefonlar teknoloji..."
» paranoiahasu@02:24: "ilginç bir durum aslında. özellikle netbook satışlarının tava..."
» MrHades@12:34: "güzel olacağa benziyor."
» OzanFIRAT@11:49: "yarısı DLC olarak sunulur zaten hehe "
» OzanFIRAT@11:48: "benim 3.5 kiloluk darbeye dayanıksız, hatta taşımaya dayanaksız..."
» paranoiahasu@18:47: "Listede de yok yok maşallah =)"
» paranoiahasu@13:10: "Şu an betayı x1900 gt ekran kartı (256 bit) ve 3 gb ram ile oynuy..."
» FatihYILMAZ@18:02: "apple delisi kuyuya bir taş attı, artık tutabilene aşkolsun. tel..."
» paranoiahasu@13:59: "wave de çok iyi satıyormuş"
» OzanFIRAT@11:36: "herşeyiyle bana SWG'yi hatırlattı, sanırım kasten gelişimleri ..."
» OzanFIRAT@22:33: "heh bende ps3'te infamous oynarken aynı şeyleri hissediyordum :D "
» paranoiahasu@23:21: "ön sipariş linki aradım yazıda bulamadım .."
» paranoiahasu@19:15: "bu resmi uzunca bir süre duvar kağıdı olarak kullanmıştım =)"
» FatihYILMAZ@11:48: "ehe evde x-box'da bunu oynuyorum. Oyunun kendisini tavsiye ederim, ..."
» paranoiahasu@14:33: "Hemen edinmeli bu albümü =)"
» paranoiahasu@02:16: "İnanılmaz şekilde kredi kartımı kabul etmeyen steam yüzünden ..."
» OzanFIRAT@23:36: "haberi bitirmeyi beklemeden, yazarken sabredemeyip Left 4 Dead 2 ve ..."

Evvel Zaman