CODEWITHSUNDEEP
javascriptcssreactjsscroll
levraininjaneer
levraininjaneer

Reputation: 1377

How to keep text on sceen while scrolling in react

I am working on a very simple website consisting of an image, with some text overlaid on top of it. In some cases, the image may be bigger than the screen, and then the user can scroll. However, I would like the overlaid text to remain on-screen, centered, even when the user scrolls. How can I do this?

Here is a basic idea of my code at the moment:

const styles = theme => ({
    main_screen: {
        position: "relative",
        textAlight: "center",
        color: "white",
        height: '100%',
        width: '100%',
        margin: "0",
        padding: "0"
    },
    caption: {
        color: "yellow",
        margin: "1em",
    },
    
    overlayText: {
        position: "absolute",
        width: "100%",
        top: "5%",
        alignItems:"center"
    },

    main_image: {
        maxwidth: "100%",
        maxHeight: "100%",
        objectFit:"cover",
        display: "block",
        margin: "0",
        padding: "0",
        overflow: "scroll"
    },
})


class ExampleSite extends React.Component {

....

    render(){
        return(
            <div id="main-screen" className={classes.main_screen}>
                <img id='target-image' onLoad={this.readDims} className={classes.main_image} src={pano_1} alt={""}/>
                <div className={classes.overlayText}>
                    <Typography className={classes.caption} align="center" > {this.state.instructionText}  </Typography>
                </div>
            </div>
        )
    }
}

Upvotes: 0

Views: 1106

Answers (1)

83C10
83C10

Reputation: 1212

position: fixed; on the text object is what you want. MDN - CSS Position

Upvotes: 2

Related Questions