Как нажать кнопку на липкой навигации после небольшой прокрутки вниз?
Я создаю веб-сайт с помощью React и сначала работаю над мобильной версией. Существует липкая панель навигации, которая прилипает к верхней части после прокрутки вниз. Прикрепляю картинку, где есть кнопка с правой стороны. Я бы хотел, чтобы эта кнопка выглядела так ПОСЛЕ прокрутки вниз. Итак, сначала кнопка находится сверху, затем, после небольшой прокрутки вниз, навигация становится липкой, а также кнопка как бы проскальзывает по навигации. Я делаю этот сайт с помощью React. Как это возможно сделать? Спасибо!
Картина:
Ответы 3
Вы можете добавить 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>Вот ручка
window.addEventListener('scroll', function(e) {
console.info('Scroll', window.pageYOffset)
Я использую прослушиватель прокрутки Windows для определения положения прокрутки. Я сохранил кнопку регистрации вместе с навигацией. Это поведение, которое вам требуется при прокрутке после некоторого смещения. Поэтому я написал скрипт для определения положения прокрутки. Когда позиция прокрутки меньше предела, я перемещаю кнопку в заголовок, иначе она находится внутри навигации.
Вы можете добавить прослушиватель событий для прокрутки, но обязательно используйте либо 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>