You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.7 KiB
71 lines
1.7 KiB
import React, { useEffect, useState } from 'react';
|
|
import { Anchor, Row, Col } from 'antd';
|
|
|
|
const App: React.FC = () => {
|
|
const topRef = React.useRef<HTMLDivElement>(null);
|
|
const [targetOffset, setTargetOffset] = useState<number>();
|
|
|
|
useEffect(() => {
|
|
setTargetOffset(topRef.current?.clientHeight);
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<Row>
|
|
<Col span={18}>
|
|
<div
|
|
id="part-1"
|
|
style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}
|
|
>
|
|
Part 1
|
|
</div>
|
|
<div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>
|
|
Part 2
|
|
</div>
|
|
<div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>
|
|
Part 3
|
|
</div>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Anchor
|
|
targetOffset={targetOffset}
|
|
items={[
|
|
{
|
|
key: 'part-1',
|
|
href: '#part-1',
|
|
title: 'Part 1',
|
|
},
|
|
{
|
|
key: 'part-2',
|
|
href: '#part-2',
|
|
title: 'Part 2',
|
|
},
|
|
{
|
|
key: 'part-3',
|
|
href: '#part-3',
|
|
title: 'Part 3',
|
|
},
|
|
]}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
|
|
<div
|
|
style={{
|
|
height: '30vh',
|
|
background: 'rgba(0,0,0,0.85)',
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '75%',
|
|
color: '#FFF',
|
|
}}
|
|
ref={topRef}
|
|
>
|
|
<div>Fixed Top Block</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
|