Question

我正在使用React构建一个网站，并且首先致力于移动版本。向下滚动后，粘性导航栏会停留在顶部。我附上一张图片，右边有一个按钮。我希望该按钮在向下滚动后看起来像那样。因此，首先，按钮在顶部，然后向下滚动一点，导航变得很粘滞，并且按钮在导航上也有所滑动。我正在用React创建这个网站。这怎么可能？谢谢！

图片：

Answer 1

您可以在代码中添加一些javascript以实现此目的。

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>

Answer 2

这里是pen

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

我正在使用Windows滚动侦听器来检测滚动位置。我将“注册”按钮与导航一起保留。这是您在某些偏移量后滚动所需的行为。所以我写了一个脚本来检测滚动位置。当滚动位置小于限制时，我会将按钮移至页眉，否则它位于导航栏中。

Answer 3

您可以为滚动添加事件侦听器，但请确保使用componentDidMmount和componentWillUnmount或useEffect挂钩以避免内存泄漏。

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>

向下滚动一点后如何在粘性导航上按下按钮？

3 个答案: