Yapışkan Kenar Çubuğu
Yapışkan Kenar Çubuğu smart akıllı ve yüksek performanslı yapışkan kenar çubuğu oluşturmak için saf bir JavaScript eklentisidir , kenar çubuğunun veya kabının boyutu olduğunda boyutları otomatik olarak yeniden boyutlandırmak için yeniden boyutlandırma sensörü ile entegre edilmiş, görünümden daha kısa veya daha kısasa kenar çubuğuyla çalışır değişti, jQuery / Zepto'yu destekler ve Firefox, Chrome, Safari ve IE9 + ile uyumludur.
Kaynak Github'da bulunabilir .
Yapışkan kenar çubuğu neden harika?
- Kaydırma yaparken tüm boyutları yeniden hesaplamaz, sadece gerekli boyutlar.
- Kaydırma gecikmesi veya jank içermeyen Süper pürüzsüz ve hiçbir sayfa geri çekilir.
- Kenar çubuğu ve konteynerinin boyutu değiştirildiğinde eklentinin tüm boyutlarını yeniden hesaplamak için yeniden boyutlandırma sensörü ile entegre edilmiştir.
- Kodunuzu belirli durumlarda kancalamak için her eki türü üzerinde etkinlik tetikleyicisi bulunur.
- Kenar çubuğunu, konteynerin geri kalanına kıyasla uzun veya çok kısa olduğunda tutun.
- Sıfır bağımlılıklar ve kurulum için süper basit.
Örnek Temel
new StickySidebar('ELEMENT')Ebeveynlerinin içinde yukarı / aşağı kaydırırken, yapışkan olmasını istediğiniz öğeyi çağırmanız yeterlidir.
var sidebar = new StickySidebar('#sidebar', {topSpacing: 20});
Kaydırılabilir Yapışkan Elemanlar
Yapışkan kenar çubuğu, görüntü alanından daha uzun olduğunda kenar çubuğunu işlemek için yeterince akıllıdır. İçerik hakkında endişelenmenize gerek yok, kenar çubuğunu bağımsız olarak yukarı ve aşağı kaydırır.
var sidebar = new stickySidebar('#sidebar', {topSpacing: 20});
Kurulum
Bower, NPM'den yapışkan kenar çubuğu eklentisini yükleyebilir veya sadece GitHub'dan indirebilirsiniz, daha sonra sticky-sidebar.jsdosyayı proje klasörünüze yükleyebilirsiniz.
kameriye
Bower'ı paket yöneticisi olarak kullanıyorsanız:
bower install sticky-sidebar NPM
NPM'yi paket yöneticisi olarak kullanıyorsanız:
npm install sticky-sidebar kullanım
Çalışmak için web sitenizin HTML yapısının buna benzer olması gerekir:
<div id="main-content" class="main">
<div id="sidebar" class="sidebar">
<div class="sidebar__inner">
<!-- Content goes here --> </div>
</div>
<div id="content" class="content">
<!-- Content goes here --> </div>
</div>
İç kenar çubuğu sarmalayıcısının .sidebar__inneristeğe bağlı olduğunu, ancak şiddetle tavsiye edildiğini, kendiniz yazmazsanız, komut dosyasının sınıf adı altında sizin için bir tane oluşturacağını unutmayın inner-wrapper-sticky, ancak bu birçok soruna neden olabilir.
Yukarıdaki örnek için aşağıdaki JavaScript'i kullanabilirsiniz:
<script type="text/javascript" src="./js/sticky-sidebar.js"></script> <script type="text/javascript"> var sidebar = new StickySidebar('#sidebar', { containerSelector: '#main-content', innerWrapperSelector: '.sidebar__inner', topSpacing: 20, bottomSpacing: 20 }); </script>
JQuery / Zepto ile kullanım
Yapışkan kenar çubuğunu jQuery eklentisi olarak yapılandırabilirsiniz, sadece herhangi bir jQuery eklentisi olarak yapılandırmak jquery.sticky-sidebar.jsyerine sticky-sidebar.jsdosya yerine ekleyin .
$('#sidebar').stickySidebar({ topSpacing: 60, bottomSpacing: 60 });
jquery.sticky-sidebar.js Sonra komut dosyası eklediğinizden emin olun jquery.js.
Kenar çubuğu veya kapsayıcının ne zaman değiştirildiğini algılamak için ResizeSensor.js'yi yapışkan kenar çubuğuna entegre edin . Yeniden boyutlandırma sensörünü bu eklenti ile kullanmak için, modül yükleyici, paket ya da olay eklenmesi ve etkinleştirme seçeneği (varsayılan olarak etkindir) üzerinden koddan önce ResizeSensor.jssticky-sidebar.js kodunu eklediğinizden emin olun ve işe yarayacaktır.<script>resizeSensor
Eklememeyi seçerseniz ResizeSensor.js, yapışkan kenar çubuğunda otomatik yeniden boyutlandırma algılaması olmaz ve yine de sorunsuz bir şekilde çalışmaya devam eder.
CSS'nizi yapılandırın
Daha sonra sadece performansı geliştirmek ve kaydırma işleminde yeniden yazdırmayı önlemek için bazı CSS'ye ihtiyacınız olacak. Yapışkan kenar çubuğu eklentisi, stilleri satır içi olarak eklemez. Bu nedenle, stil sayfanıza manuel olarak eklemeniz gerekir.
.sidebar{ will-change: min-height; }
.sidebar__inner{ transform: translate(0, 0);
/* For browsers don't support translate3d. */
transform: translate3d(0, 0, 0); will-change: position, transform; }
Seçenekler
Yapışkan kenar çubuğu eklentisi, nasıl çalıştığını yapılandırmak için seçeneklerle birlikte gelir. Aşağıdaki tüm seçenekler isteğe bağlıdır. Varsayılan değerler aşağıda sunulmuştur.
var stickySidebar = new StickySidebar('#sidebar', { topSpacing: 0, bottomSpacing: 0, containerSelector: false, innerWrapperSelector: '.sidebar__inner', resizeSensor: true, stickyClass: 'is-affixed', minWidth: 0 });
topSpacing
Yapışkan hale geldiğinde öğenin ek üst aralığı. Default: 0.
var sidebar = new StickySidebar('.sidebar', {topSpacing: 50});
bottomSpacing
Yapışkan hale geldiğinde elemanın ek alt boşluğu. Default: 0.
var sidebar = new StickySidebar('.sidebar', {bottomSpacing: 50});
containerSelector
Yapışkan elemanın başlangıç ve bitiş noktalarını sınırlamak için bir konteyner kenar çubuğu belirtin. Yapışkan elemanın en yakın ebeveyine göre varsayılan. Bir konteyner seçici belirtmek için tavsiye edilir.
var sidebar = new StickySidebar('.sidebar', {containerSelector: '.container'});
innerWrapperSelector
Yapışkan kenar çubuğunun iç sarmalayıcı seçicisi, bu sarmalayıcı kenar çubuğu öğesinde bulunmuyorsa, eklenti sınıf adı altında sizin için bir tane oluşturacaktır inner-wrapper-sticky. Seçiciyi bu seçeneğe eklemek yerine, kenar çubuğunun iç sarmalayıcısını kendiniz yazmanız şiddetle tavsiye edilir. Default: .inner-wrapper-sticky.
var sidebar = new StickySidebar('.sidebar', {innerWrapperSelector: '.sidebar__inner'});
resizeSensor
Yapışkan kenar çubuğu, ResizeSensor.js entegre edilmişse , kenar çubuğu veya konteyner öğesi boyutu değiştirildiğinde eklenti tüm boyutları yeniden hesaplar. Bu seçenek, yeniden boyutlandırma sensörü özelliğini etkinleştirmenizi veya devre dışı bırakmanızı sağlar.
Default: true.
Not: Bu seçenek, ResizeSensor.jssayfanıza dahil edilmemiş olsa bile , ResizeSensor.js bölümündeki Kullanım bölümünde daha fazla ayrıntıya sahip olmayacaktır .
var sidebar = new StickySidebar('.sidebar', {resizeSensor: true});
stickyClass
Yapışkan hale geldiğinde kenar çubuğu öğesine eklenecek CSS sınıfının adı.
Default: is-affixed.
var sidebar = new StickySidebar('.sidebar', {stickyClass: 'is-affixed'});
minWidth
Pencere genişliği, bu değerin altında olduğunda kenar çubuğu normal konumuna geri döner.
Default: 0.
var sidebar = new StickySidebar('.sidebar', {minWidth: 300});
Olaylar
Yapışkan kenar çubuğu eklentisi, eklenti durumu değiştiğinde tetiklenen çeşitli olaylara sahiptir.
affix.top.stickySidebar - Öğe, görünümün üstüne yapıştırılmadan hemen önce tetiklenir.
affixed.top.stickySidebar - Öğe, görünümün üstüne yapıştırıldıktan hemen sonra yangınlar.
affix.bottom.stickySidebar - Elemanın görünümün altına yapıştırılmasından hemen önce yangınlar.
affixed.bottom.stickySidebar - Elemanın görüş alanının altına yapıştırılmasından hemen sonra yangınlar.
affix.container-bottom.stickySidebar - Elemanın kabın altına yapıştırılmasından hemen önce yangınlar.
affixed.container-bottom.stickySidebar - Elemanın kabın altına yapıştırılmasından hemen sonra yangınlar.
affix.unbottom.stickySidebar - Elemanın artık dibe vurulmasından hemen önce yangınlar.
affixed.unbottom.stickySidebar - Elemanın artık dibe vurulmasından hemen sonra yangınlar.
affix.static.stickySidebar - Elemanın konumuna geri dönmeden hemen önce yangınlar.
affixed.static.stickySidebar - Elemanın konumuna döndükten hemen sonra yangınlar.
Örneğin, elemanın ne zaman üst ve alt tarafa yapıştığını belirlemek isterseniz, şunları yapabiliriz:
var sidebar = document.getElementById('sidebar'); var stickySidebar = new StickySidebar(sidebar); sidebar.addEventListener('affix.top.stickySidebar', function () { console.log('Sidebar has stuck top of viewport.'); }); sidebar.addEventListener('affix.bottom.stickySidebar', function (event) { console.log('Sidebar has stuck bottom of viewport.'); });
Genel Yöntemler
updateSticky- Kenar çubuğu, konteyner ve viewport'un tüm önbelleğe alınmış boyutlarının yeniden hesaplanmasını ve kenar çubuğunun yeni boyutlara göre güncellenmesini zorlayın. Tetik olayının aynı işlevi, update.stickyyukarıdaki olayları okuyun.
var stickySidebar = new StickySidebar('.sidebar'); stickySidebar.updateSticky();
destroy - Tüm satır içi stilleri, yardımcı sınıfları ve etkinlik dinleyicilerini kaldırın.
var stickySidebar = new StickySidebar('.sidebar'); stickySidebar.destroy();
Kaydırma performansı
Yapışkan kenar çubuğu eklentisi, kaydırma performansını çok ciddiye alır, Kaydırma gecikmesi veya jank olmadan yapışkan öğeler elde etmenizi sağlamak için sıfırdan inşa edilmiştir.
Kaydırma jankının en büyük sebebi onScroll çok fazla iş var. Ancak bu eklentide , yapıştırılmış kenar çubuğu eklentisini oluştururken, yeniden boyutlandırmayı ve mümkün olduğunca pürüzsüz hale getirmeyi önlediğimizde, artırılmış performans yerine önemli ölçüde ekleyerek will-change: transformve çalışarak tüm boyutları önbelleğe aldık.translate
(Y, X)top: Y; Left: X;
Tarayıcı Uyumluluğu
Yapışkan kenar çubuğu, Internet Explorer 9 ve yukarısı da dahil olmak üzere tüm modern tarayıcılarda çalışır, ancak IE9 ile çalışmasını istiyorsanız, requestAnimationFrame yapışkan kenar çubuğu kodundan önce polyfill eklemelisiniz .
Tarayıcı uyumluluğuyla ilgili herhangi bir sorun yaşıyorsanız, Bir sorun göndermekten çekinmeyin .
jQuery / Zepto Çatışması Yok
Bazen yapışkan kenar çubuğu eklentisi diğer eklentilerle çakışır. Bu durumda, isim alanı çarpışmaları zaman zaman meydana gelebilir. Bu olursa, .noConflictdeğerini geri almak için eklentiyi çağırabilirsiniz $.fn.stickySidebar.
var stickySidebar = $.fn.stickySidebar.noConflict(); // Returns $.fn.stickySidebar assigned value. $.fn.stickySidebar = stickySidebar; // Give $().stickySidebar functionality.
Kaynak Yazar
Ahmed Bouhuolia GitHub
