Skip to content

Belli bir scroll'dan sonra sayfaya yapışan elementler

Notifications You must be signed in to change notification settings

omergulcicek/sticky

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

Sticky

Sayfada belirli bir scroll'a gelindiğinde sayfaya yapışan elementler.

Kullanımı

sticky fonksiyonu bir obje parametresi bekler.

Bu parametreler;

attribute tür açıklama varsayılan değer
breakpoint string hangi çözünürlükte sticky olacak mobile tablet desktop
id string sticky olacak elementin id'si -
scrollPosition integer hangi scroll pozisyonunda sticky olacağı -
className string sticky olacak elemente eklenen class sticky
hidden boolean aşağı inerken element gizlensin mi değeri false

Örnek;

sticky({
  breakpoint      : "mobile",
  id              : "header",
  scrollPosition  : 450,
  className       : "yapiskan",
  hidden          : true
})

Yukarıdaki kod, header id'sine sahip HTML elementine mobil çözünürlükte, 450px scroll'dan sonra yapiskan sınıfını ekler. Aşağı yönde scroll yapıldığında header'a sınıf eklemek fakat yukarı scroll edildiğinde yapiskan sınıfını ekler.


  • breakpoint değerine verilecek değerler mobile, tablet, desktop olarak verilmiştir ama kod tarafı ilk harfine bakar. Yani "m" yada "mahmut" yazılması yine mobil olarak çalışacaktır.

  • className değerine bir değer girilmezse sticky sınıfı varsayılan olarak eklenir.

  • hidden değerine bir değer girilmezse element belirlenen px'den sonra sınıf adı direkt eklenir; yukarı yada aşağı scroll edilmesini dinlemez.


NOT: Proje sadece JavaScript içerir. Scroll dinlenir ve belirlenen px'de belirlenen elemente class eklenir. Herhangi bir CSS içermez. CSS kısmını proje ihtiyacına göre sizin yazmanız gerekir.

About

Belli bir scroll'dan sonra sayfaya yapışan elementler

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages