Akıllı Yapışkan Öğeler Yapmak için 15 jQuery Eklentisi

Şimdi, siteyi yukarı veya aşağı kaydırırken bir konuma sabitlenmiş bir sitedeki belirli öğelerin görülmesi yaygındır; navigasyon menüsü, başlık veya kenar çubuğu. Bu, kullanıcının pozisyonundan bağımsız olarak elemanın kolayca erişilebilir olmasını sağlar.

Yapışkan bir öğe olarak adlandırılan, bu sadece CSS kullanılarak gerçekleştirilebilir, ancak bu yöntemi kullanarak, efekt birden fazla tarayıcıda güvenilir değildir. Bu nedenle, bu özel UX tasarımını çok az veya hiç uğraşmadan elde etmenize izin verecek bir avuç dolusu JS kütüphanesi ve jQuery eklentisini bir araya getirdik..

1. Yol işaretleri

Yol işaretleri, görünüm alanındaki öğe konumunu temel alan bir işlevi yürüten bir kütüphanedir. Bu elemanı yapan bir kısayol işleviyle birlikte gelir “yapışkan”. Kaydırma yönünü özelleştirebilirsiniz - yukarı, aşağı, ve hatta sağ ve ayrıldı - hangi elemanın görünüm alanı içinde kalması gerektiği.

• Bağımlılık: Yok / jQuery (isteğe bağlı)
• Lisans: MIT lisansı

2. Yapışkan Kiti

İle StickyKit, sadece bir öğenin görünüm alanı içinde kalmasını sağlamakla kalmaz, aynı zamanda bir kerede birden fazla öğeye atadığınız üst öğenin içine yapışmasını da sağlayabilirsiniz. Eklenti ayrıca özel Etkinlikler ve Tetikleyiciler dahil olmak üzere bazı gelişmiş ayarlarla birlikte gelir.

• Bağımlılık: jQuery
• Lisans: WTFPL

3. Yapışkan JS

StickyJS ne dediğini yapan bir kullanımı kolay jQuery yapışkan eklenti. Eklenti kutunun dışında çalışır. Yine de, bazı özelleştirmelere ihtiyacınız varsa, Seçenekler / Ayarlar, Özel Yöntemler ve Olaylar ile birlikte gelir..

• Bağımlılık: jQuery
• Lisans: MIT lisansı

4. HeadRoom

Yapışkan bir site başlığı, siteyi mobilde görüntülediğinizde fark yaratan değerli dikey alanı kaplar. kafa boşluğu yapışkan başlığınızı akıllı hale getirecek bir JavaScript kütüphanesidir; Kullanıcılar sayfayı aşağı kaydırdığında ve yukarı kaydırıldığında göründüğünde başlık gizlenecektir.

• Bağımlılık: Yok / jQuery (isteğe bağlı) / Açısal (isteğe bağlı)
• Lisans: MIT lisansı

5. MakefixedJS

Makefixed Kullanıcılar sayfayı kaydırırken öğelerin dinamik olarak sabitlenmesini sağlar. Sadece ara makeFixed () Sabitlemek istediğiniz öğenin işlevi. Hareket halindeyken görmek için gösterime göz atın.

• Bağımlılık: jQuery
• Lisans: GPL

6. Geceyarısı

Gece yarısı Birden fazla başlık / öğe yapıştırmanıza ve belgedeki (DOM ağacı) içindeki konumlarına göre bunlar arasında geçiş yapmanıza izin verin, ne demek istediğimi görmek için gösterime göz atın. Buna ek olarak sadece ekleyerek anında anında renklerini değiştirebilirsiniz veri gece yarısı belirtilen renk adına sahip özellik.

• Bağımlılık: jQuery
• Lisans: MIT lisansı

7. ScrollMagic

ScrollMagic Sayfa kaydırma sırasında etkileşim eklemek için gelişmiş özelliklere sahiptir. Öğeleri belirli kaydırma konumlarından sabitleyebilir, kaydırma konumuna göre animasyon ekleyebilir veya hatta harika bir paralaks efekti oluşturabilirsiniz. Bu demo size bu eklentinin neler yapabileceği hakkında bazı bilgiler verir..

• Bağımlılık: jQuery / Velocity.js
• Lisans: İkili Lisans (MIT ve GPL)

8. onScreen

ekranda Waypoints'e benzer - öğe tarayıcı görünüm alanı içinde belirli konumlara girerken, çıkarken veya belirli konumlara erişirken işlevleri yürütmenize olanak tanır..

• Bağımlılık: jQuery
• Lisans: MIT lisansı

9. jQuery Pin

jQuery Pin küçük bir jQuery eklentisi “toplu iğne” veya “toplu iğnelerini çıkarmak” Sayfayı kaydırdığınızda, elemanları bir konuma getirin. Bu eklentinin en sevdiğim kısmı belirli görünüm genişliklerinde onu devre dışı bırakma seçeneği.

• Bağımlılık: jQuery
• Lisans: BSD lisansı

10. Yapışkan Şamandıra

Yapışkan Şamandıra Öğelere, ebeveyne göre sabit bir pozisyon vermemizi sağlar. Yapışkan seçeneği ihtiyaçlarınız doğrultusunda verilen parametrelerle ve değeri değiştirerek ayarlayabilirsiniz. Demoyu burada yakalayın.

• Bağımlılık: jQuery
• Lisans: Tanımsız

11. Zebra Pimi

Zebra Pimi herhangi bir elemanın kabına sabitlenmesi için hafif bir eklentidir. Bu eklenti ile ekleyebilirsiniz “Yapışkan-lik” Projenizdeki gezinme, kenar çubukları, üstbilgiler ve altbilgiler gibi öğeler veya kullanıcılar aşağı kaydırırken görünür olmasını sağlamak istediğiniz diğer öğeler. Demoyu inceleyin.

• Bağımlılık: jQuery
• Lisans: GPL lisansı

12. HC Yapışkan

İle HC-Yapışkan, kabına, herhangi bir elemana veya belgenin kendisine atıfta bulunan yapışkan elemanlar yapabilirsiniz. Bu eklenti, yüzmeye başlamak için yukarıdan aşağıya mesafe ve diğer seçenekler gibi ihtiyaçlarınıza göre ayarlayabileceğiniz bazı seçeneklere sahiptir..

• Bağımlılık: jQuery
• Lisans: MIT lisansı

13. Yapışkan Mojo

Yapışkan Mojo harika yapışkan öğeler yapmak için hafif, hızlı ve esnek bir jQuery eklentisi. Modern tarayıcılarla uyumludur ve IE’de incelikle bozulur.

• Bağımlılık: jQuery
• Lisans: MIT lisansı

14. Sabit Navbar

Aşağı kaydırıldığında yapışan tek bir sayfa gezinti yapmak istiyorsanız, bu kütüphane tam size göre.Sabit Navbar gezinmeyi tarayıcı penceresinin en üstüne koyacak ve sayfanızdaki ilgili bölüme bağlanmak için bağlantı bağlantısını vurgulayacaktır. Gezinme efektini güzelleştirmek için Animate.css de ekleyebilirsiniz..

• Bağımlılık: jQuery
• Lisans: MIT lisansı

15. StickyStack

StickyStack Kullanıcılar öğeyi kaydırdıklarında ve görünümün en üstüne ulaştığında öğelerin istiflenmesini sağlar. Bu kütüphane ile uzun sayfanız yığılmış kartlara dönüşür.

• Bağımlılık: jQuery
• Lisans: Tanımsız