CODEWITHSUNDEEP
htmlcssreactjs
David
David

Reputation: 341

How to push a button on sticky navigation after scrolling down a bit?

I am building a website with React and am working on the mobile version first. There is a sticky navigation bar that sticks to the top after scrolling down. I attach a picture where there is a button on the right side. I would like that button to appear like that AFTER scrolling down. So, first, the button is on the top, then after scrolling down a bit, the navigation becomes sticky and also the button kind of slips on the navigation. I am making this website with React. How is this possible to make? Thank you!

Picture:

enter image description here

Upvotes: 0

Views: 1732

Answers (3)

Jonathan Rys
Jonathan Rys

Reputation: 1886

You can add an event listener for scroll, but make sure to use either componentDidMmount and componentWillUnmount or the useEffect hook to avoid a memory leak.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            showButton: false
        }
    }
    
    handleScroll(e) {
        const y = window.pageYOffset || document.documentElement.scrollTop;

        if (y > 80) {
            this.setState({showButton: true});
        } else {
            this.setState({showButton: false});
        }
    };
    
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll.bind(this));
    }
    
    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll.bind(this));
    }
   

    render() {
        return (
            <div className="body">
              <div className="fixed-header">
                <button className={this.state.showButton ? 'show' : 'hide'}>Can you see me?</button>
              </div>
            </div>
        );
    }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));
.show {
    display: block;
}
.hide {
    display: none;
}
.body {
    height: 500px;
}
.fixed-header {
    position: fixed;
    top: 0;
    left: 0
    width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: 0

Ajay Varghese
Ajay Varghese

Reputation: 769

Here's the pen

window.addEventListener('scroll', function(e) {
console.log('Scroll', window.pageYOffset)

I'm making use of windows scroll listener to detect scroll position. I have kept the Signup button along with nav. This is the behavior you require on scroll after some offset. So I have written a script to detect the scroll position. When scroll position is less than the limit, I'm moving the button to the header, else it's inside nav.

Upvotes: 0

user11602025
user11602025

Reputation:

You can add some javascript to your code to make this happen. 

let scroller = document.querySelector(".scroll");
document.addEventListener('scroll', scroll);
function scroll(){
scroller.style.display = 'block';
}
.scroll{
display: none;
}
<html>
<body>
<button class = "scroll">Scroller</button>
</body>
</html>

Upvotes: 1

Related Questions