Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Bazı web sitesi tasarımları, aşağı kaydırdıkça ekranın üst kısmına "yapışan" bir başlık kullanır. Siz kaydırdıkça görünür kalan bir başlığa genellikle yapışkan başlık denir.

Kendiniz özel kod yazarak veya üçüncü taraf bir kitaplık kullanarak React sitenize yapışkan bir başlık ekleyebilirsiniz.

Yapışkan Başlık Nedir?

Yapışkan başlık, kullanıcı sayfayı aşağı kaydırdığında ekranın üst kısmında sabit kalan bir başlıktır. Bu, kullanıcı kaydırırken önemli bilgileri görünür tutmak için yararlı olabilir.

Bununla birlikte, çubuk başlığının kalan tasarımınız için ekran alanı miktarını azalttığını unutmayın. Yapışkan bir başlık kullanıyorsanız, kısa tutmak iyi bir fikirdir.

Yapışkan Başlık Oluşturma

Yapmanız gereken ilk şey, bir onscroll işleyicisi ayarlamaktır. Bu işlev, kullanıcı her kaydırdığında çalışacaktır. Bunu, pencere nesnesine bir onscroll olay dinleyicisi ekleyerek ve

instagram viewer
React kancalarını kullanma. Onscroll işleyicisini ayarlamak için, pencere nesnesinin useEffect kancasını ve addEventListener yöntemini kullanmanız gerekir.

Aşağıdaki kod, yapışkan bir başlık bileşeni oluşturur ve onu CSS kullanarak şekillendirir.

içe aktarmak Tepki, { useState, useEffect } itibaren 'tepki';
işlevYapışkan Başlık() {
sabit [isSticky, setSticky] = useState(YANLIŞ);
sabit handScroll = () => {
sabit pencereScrollTop = pencere.kaydırmaY;
 eğer (pencereScrollTop > 10) {
 setYapışkan(doğru);
 } başka {
 setYapışkan(YANLIŞ);
 }
 };
 useEffect(() => {
 pencere.addEventListener('taslak', tutamaçScroll);
geri dönmek () => {
 pencere.removeEventListener('taslak', tutamaçScroll);
 };
 }, []);
sabit öğeler = [
 {
 isim: 'Ev',
 bağlantı: '/'
 },
 {
 isim: 'Hakkında',
 bağlantı: '/about'
 },
 {
 isim: 'Temas etmek',
 bağlantı: '/contact'
 }
 ];
sabit veri = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
geri dönmek (
<div sınıfıAdı="Uygulama">
<başlık stili={{arka plan: isSticky? '#ffff': '', Genişlik: '100%', zIndex: '999', konum: Yapışkan mı?'sabit':'mutlak' }}>
 {items.map (öğe => (
<a href={item.link} key={item.name}>
 {öğe adı}
</A>
 ))}
</header>
<Ul>
 {veri.harita((x) => {
 geri dönmek (<li tuşu={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
ihracatvarsayılan Yapışkan Başlık;

Bu yöntem satır içi stil kullanır, ancak CSS sınıflarını da kullanabilirsiniz. Örneğin:

.yapışkan {
 pozisyon: sabit;
 üst: 0;
 genişlik: %100;
 z-endeksi: 999;
}

Ortaya çıkan sayfa şöyle görünecektir:

Ek özellikler

Yapışkan başlığınızı daha kullanıcı dostu hale getirmek için yapabileceğiniz birkaç şey daha var. Örneğin, bir başa dön düğmesi ekleyebilir veya kullanıcı aşağı kaydırdığında başlığı şeffaf hale getirebilirsiniz.

Başa dön butonu eklemek için aşağıdaki kodu kullanabilirsiniz.

içe aktarmak Tepki, { useState, useEffect } itibaren 'tepki';
işlevYapışkan Başlık() {
sabit [isSticky, setSticky] = useState(YANLIŞ);
sabit [showBackToTop, setShowBackToTop] = useState(YANLIŞ);
sabit handScroll = () => {
sabit pencereScrollTop = pencere.kaydırmaY;
 eğer (pencereScrollTop > 10) {
 setYapışkan(doğru);
 SetShowBackToTop(doğru);
 } başka {
 setYapışkan(YANLIŞ);
 SetShowBackToTop(YANLIŞ);
 }
 };
sabit scrollToTop = () => {
pencere.scrollTo({
 üst: 0,
 davranış: 'düz'
 });
 };
 useEffect(() => {
 pencere.addEventListener('taslak', tutamaçScroll);
geri dönmek () => {
 pencere.removeEventListener('taslak', tutamaçScroll);
 };
 }, []);
sabit öğeler = [
 {
 isim: 'Ev',
 bağlantı: '/'
 },
 {
 isim: 'Hakkında',
 bağlantı: '/about'
 },
 {
 isim: 'Temas etmek',
 bağlantı: '/contact'
 }
 ];
sabit veri = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
geri dönmek (
<div sınıfıAdı="Uygulama">
<başlık stili={{arka plan: isSticky? '#ffff': '', Genişlik: '100%', zIndex: '999', konum: Yapışkan mı?'sabit':'mutlak' }}>
 {items.map (öğe => (
<a href={item.link} key={item.name}>
 {öğe adı}
</A>
 ))}
</header>
<Ul>
 {veri.harita((x) => {
 geri dönmek (<li tuşu={x}>{X}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<button onClick={scrollToTop}>Başa dönüş</button>
 )}</div>
</div>
 );
}
ihracatvarsayılan Yapışkan Başlık;

Bu kod, yapışkan bir başlık bileşeni oluşturur ve onu CSS kullanarak şekillendirir. ayrıca yapabilirsin Tailwind CSS'yi kullanarak bileşene stil verin.

Alternatif Yöntemler

Yapışkan bir başlık oluşturmak için üçüncü taraf bir kitaplık da kullanabilirsiniz.

tepki-yapışkan kullanma

tepki yapışkan kitaplığı, React'te yapışkan öğeler oluşturmanıza yardımcı olur. tepki yapışkanını kullanmak için önce kurun:

npm düzenlemek tepki yapışkan

Ardından, şu şekilde kullanabilirsiniz:

içe aktarmak Tepki itibaren 'tepki';
içe aktarmak { Yapışkan Kap, Yapışkan } itibaren "tepki-yapışkan";
işlevUygulama() {
sabit veri = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
geri dönmek (
<div>
<Yapışkan Konteyner>
<Yapışkan>{({ stil }) => (
<başlık stili={stil}>
 Bu dır-dir yapışkan başlık
</header>
 )}
</Sticky>
<Ul>
 {veri.harita((x) => {
 geri dönmek (<li tuşu={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
ihracatvarsayılan Uygulama;

Yukarıdaki kodda, öncelikle reaksiyon-yapışkan kitaplığından StickyContainer ve Sticky bileşenlerini içe aktarmanız gerekir.

Ardından, sticky öğesini içermesi gereken içeriğin çevresine StickyContainer bileşenini eklemeniz gerekir. Bu durumda, başlığı takip eden listede yapışkan yapmak istiyorsunuz, bu nedenle StickyContainer'ı ikisinin etrafına ekleyin.

Ardından, yapışkan yapmak istediğiniz öğenin çevresine Yapışkan bileşeni ekleyin. Bu durumda, bu başlık öğesidir.

Son olarak, Yapışkan bileşene bir stil desteği ekleyin. Bu, başlığı doğru şekilde konumlandıracaktır.

tepki yapışkan düğümü kullanma

React-stickynode, React'te yapışkan öğeler oluşturmanıza yardımcı olan başka bir kitaplıktır.

tepki-yapışkan düğümü kullanmak için önce kurun:

npm düzenlemek tepki-yapışkan düğüm

O zaman şu şekilde kullanabilirsiniz:

içe aktarmak Tepki itibaren 'tepki';
içe aktarmak Yapışkan itibaren 'tepki-yapışkan düğüm';
işlevUygulama() {
sabit veri = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
geri dönmek (
<div>
<Yapışkan etkin={true} bottomBoundary={1200}>
<div>
 Bu dır-dir yapışkan başlık
</div>
</Sticky>
<Ul>
 {veri.harita((x) => {
 geri dönmek (<li tuşu={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
ihracatvarsayılan Uygulama;

React-stickynode kitaplığından Yapışkan bileşeni içe aktararak başlayın.

Ardından, yapışkan yapmak istediğiniz öğenin çevresine Yapışkan bileşenini ekleyin. Bu durumda, çevresine Yapışkan bileşeni ekleyerek başlığı yapışkan hale getirin.

Son olarak, etkinleştirilmiş ve bottomBoundary props'u Sticky bileşenine ekleyin. Etkinleştirilen pervane, başlığın yapışkan olmasını sağlar ve bottomBoundary pervanesi, sayfanın çok aşağısına inmemesini sağlar.

Kullanıcı Deneyimini İyileştirin

Yapışkan bir başlıkla, kullanıcının sayfada nerede olduklarını unutması kolay olabilir. Yapışkan başlıklar, ekranın daha küçük olduğu mobil cihazlarda özellikle sorunlu olabilir.

Kullanıcı deneyimini iyileştirmek için bir "başa dön" düğmesi de ekleyebilirsiniz. Böyle bir düğme, kullanıcının hızla sayfanın en üstüne gitmesine olanak tanır. Bu, özellikle uzun sayfalarda yardımcı olabilir.

Hazır olduğunuzda, React uygulamanızı GitHub Sayfalarında ücretsiz olarak dağıtabilirsiniz.