使用 WayPoint 滚动时如何显示导航栏

Question

所以当我滚动到实际导航栏下方时，我试图让我的导航栏固定在屏幕顶部。当我滚动过去时，我正在使用 WayPoints onEnter 和 onLeave 来触发。我遇到的问题是，当 styled 等于 false 时，{position:'relative'} 我相信会导致网站崩溃，我不确定为什么，也不知道解决方案是什么。

import React, { useEffect, useState } from 'react'
import Navbar from './Navbar'
import { Box, Grid, Card, CardMedia, CardActionArea, Typography, CardContent, CardActions, Button }             
from '@material-ui/core'
import Styles from './Styles'
import { Random } from 'react-animated-text'
import { projectSections } from './ListItems' 
import { Waypoint } from 'react-waypoint';

const Portfolio = () => {

    const [styled, setStyled] = useState(false)

    const style = () => (
        styled==false
        ? {
            position:'fixed',
            width:'100%',
            zIndex:99
        }
        : {position:'relative'}
    )

    const handleWaypointEnter = () => (
        setStyled(!styled) )

    const handleWaypointLeave = () => (
        setStyled(!styled)
        )

    return (
    <>
        <Waypoint
        onEnter={handleWaypointEnter}
        onLeave={handleWaypointLeave}
        >
        <div style={style()}>
            <Navbar/>
        </div>
        </Waypoint>

    {/* Ignore this for now
        <Box style={{position:'relative'}}>
            <Box component='div'>
                <Typography align='center' className={classes.portTitle}>
                    <Random 
                    className={classes.portTitle}
                    text="PORTFOLIO"
                    effect='pop'
                    effectChange={.8}
                    effectDuration={1.3}
                    />
                </Typography>
                <Grid container justify='center' alignItems='center' style={{padding:20}}>
                    {project()}
                </Grid>
            </Box>
        </Box>
    */}
    </>
)

}

Answer 1

您是否尝试过在样式函数中使用 return 语句。

使用 WayPoint 滚动时如何显示导航栏

How to display navbar when scrolled with WayPoint

css

scroll

reactjs

waypoint