yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-12 06:58:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix y-position related processing

Browse Source
This commit is contained in:
Sumire Isshiki 2024-03-11 21:56:31 +09:00
parent 3a1f024a90
commit e36deac343
1 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.tsx
View File

@ -20,12 +20,7 @@ export default function App() {
const card = Math.max((window.innerHeight / 2) - window.scrollY, 100);
setCardY(card);
const mutualsElm = document.getElementById("mutuals");
let mutualsY = 0;
if (mutualsElm) {
mutualsY += mutualsElm.scrollHeight;
}
setContentY(card + (window.innerHeight / 2) + mutualsY * 2);
setContentY(card + (window.innerHeight / 2) + 60 * 2);
const cardElm = document.getElementById("card");
const contentElm = document.getElementById("content");
@ -45,11 +40,7 @@ export default function App() {
useEffect(() => {
handleScroll();
const mutualElm = document.getElementById("mutuals");
if (mutualElm) {
window.scrollTo(0, mutualElm.scrollHeight)
}
window.scrollTo(0, 60)
window.addEventListener('scroll', handleScroll);
return () => {
@ -61,11 +52,9 @@ export default function App() {
<RecoilRoot>
<ThemeProvider>
<>
<div id="mutuals">
<Mutuals />
</div>
<div>
<div className={`sticky h-screen absolute`} style={{ opacity: cardOpacity, marginTop: `${document.getElementById("mutuals")?.offsetHeight}px` }}>
<div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `60px` }}>
<div id="card" className="fixed py-5 -mt-20" style={{ top: `${cardY}px` }}>
<Card />
</div>