How to display navbar when scrolled with WayPoint

so i'm trying to make my Navbar fixed to the top of the screen when i have scrolled below the actual Navbar. I am using WayPoints onEnter and onLeave to trigger when i have scrolled past. The issue i'm having is, that when styled is equal to false, the {position:'relative'} i believe makes the site crash and i'm not sure why, or what solution is.

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>
    */}
    </>
)

}

Have you tried with return statement in style function.