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 React kancalarını kullanarak yapabilirsiniz . 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.
import React, { useState, useEffect } from ‘react’;nfunction StickyHeader() {n const [isSticky, setSticky] = useState(false);n const handleScroll = () => {n const windowScrollTop = window.scrollY;n if (windowScrollTop > 10) {n setSticky(true);n } else {n setSticky(false);n }n };n useEffect(() => {n window.addEventListener(‘scroll’, handleScroll);n return () => {n window.removeEventListener(‘scroll’, handleScroll);n };n }, []);n const items = [n {n name: ‘Home’,n link: ‘/’n },n {n name: ‘About’,n link: ‘/about’n },n {n name: ‘Contact’,n link: ‘/contact’n }n ];n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]n return (n <div className=”App”>n <header style={{ background: isSticky ? ‘#fff’ : ”, width: ‘100%’, zIndex: ‘999’,position:isSticky ?’fixed’:’absolute’ }}>n {items.map(item => (n <a href={item.link} key={item.name}>n {item.name}n </a>n ))}n </header>n <ul>n {data.map((x) => {n return (<li key={x}>{x}</li>)n })}n </ul>n </div>n );n}nexport default StickyHeader;
Bu yöntem satır içi stil kullanır, ancak CSS sınıflarını da kullanabilirsiniz. Örneğin:
.sticky {n position: fixed;n top: 0;n width: 100%;n z-index: 999;n}n
Ortaya çıkan sayfa şöyle görünecektir:
tepkide yapışkan başlıklı sayfa
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.
import React, { useState, useEffect } from ‘react’;nfunction StickyHeader() {n const [isSticky, setSticky] = useState(false);n const [showBackToTop, setShowBackToTop] = useState(false);n const handleScroll = () => {n const windowScrollTop = window.scrollY;n if (windowScrollTop > 10) {n setSticky(true);n setShowBackToTop(true);n } else {n setSticky(false);n setShowBackToTop(false);n }n };n const scrollToTop = () => {n window.scrollTo({n top: 0,n behavior: ‘smooth’n });n };n useEffect(() => {n window.addEventListener(‘scroll’, handleScroll);n return () => {n window.removeEventListener(‘scroll’, handleScroll);n };n }, []);n const items = [n {n name: ‘Home’,n link: ‘/’n },n {n name: ‘About’,n link: ‘/about’n },n {n name: ‘Contact’,n link: ‘/contact’n }n ];n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]n return (n <div className=”App”>n <header style={{ background: isSticky ? ‘#fff’ : ”, width: ‘100%’, zIndex: ‘999’,position:isSticky ?’fixed’:’absolute’ }}>n {items.map(item => (n <a href={item.link} key={item.name}>n {item.name}n </a>n ))}n </header>n n <ul>n {data.map((x) => {n return (<li key={x}>{x}</li>)n })}n </ul>n <div>n {showBackToTop && (n <button onClick={scrollToTop}>Back to top</button>n )}</div>n </div>n );n}nexport default StickyHeader;
Bu kod, yapışkan bir başlık bileşeni oluşturur ve onu CSS kullanarak şekillendirir. Ayrıca Tailwind CSS’yi kullanarak bileşenin stilini belirleyebilirsiniz .
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 install react-sticky
Ardından, şu şekilde kullanabilirsiniz:
import React from ‘react’;nimport { StickyContainer, Sticky } from ‘react-sticky’;nfunction App() {n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]n return (n <div>n <StickyContainer>n <Sticky>{({ style }) => (n <header style={style}>n This is a sticky headern </header>n )}n </Sticky>n <ul>n {data.map((x) => {n return (<li key={x}>{x}</li>)n })}n </ul>n </StickyContainer>n n </div>n );n}nexport default App;
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 öğesi ekleyin. Bu, başlığı doğru şekilde konumlandıracaktır.
yapışkan başlıklı tepki uygulaması tepki yapışkan kullanarak tepkide
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 install react-stickynode
O zaman şu şekilde kullanabilirsiniz:
import React from ‘react’;nimport Sticky from ‘react-stickynode’;nfunction App() {n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]n return (n <div>n <Sticky enabled={true} bottomBoundary={1200}>n <div>n This is a sticky headern </div>n </Sticky>n <ul>n {data.map((x) => {n return (<li key={x}>{x}</li>)n })}n </ul>n </div>n );n}nexport default App;
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.
yapışkan başlıklı sayfa, tepki-yapışkan düğüm kullanarak tepki verir
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.