Home-theater-designers
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.
xbox one denetleyicisi usb çalışmıyor
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.
GÜNÜN MAKALE VİDEOSU
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ı 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.
import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
} else {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const data = [ 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 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default StickyHeader;Bu yöntem satır içi stil kullanır, ancak CSS sınıflarını da kullanabilirsiniz. Örneğin:
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 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.
import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const [showBackToTop, setShowBackToTop] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
setShowBackToTop(true);
} else {
setSticky(false);
setShowBackToTop(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const data = [ 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 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
<div>
{showBackToTop && (
<button onClick={scrollToTop}>Back to top</button>
)}</div>
</div>
);
}
export default StickyHeader;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 install react-stickyArdından, şu şekilde kullanabilirsiniz:
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
function App() {
const data = [ 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 ]
return (
<div>
<StickyContainer>
<Sticky>{({ style }) => (
<header style={style}>
This is a sticky header
</header>
)}
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</StickyContainer>
</div>
);
}
export 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 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 install react-stickynodeO zaman şu şekilde kullanabilirsiniz:
import React from 'react';
import Sticky from 'react-stickynode';
function App() {
const data = [ 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 ]
return (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
This is a sticky header
</div>
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export 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.
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.