遇到了一个javascript滚动的问题,想请教大家!
我已经完成了当网页向下滚动时,绿色块会发生变化。当我想向上滚动网页时,绿色块会立即变回原来的样式!
但目前,他只有重回巅峰,才能恢复原本的风采。我应该如何重写它,以便在页面向上滚动时绿色块会恢复到原始样式?
谢谢你看我的问题。
let title = document.querySelector('.title');
function move(){
let moveTo = (title.offsetTop) + (title.clientHeight /2);
if(window.scrollY > moveTo){
title.classList.add('fixedTop');
}else{
title.classList.remove('fixedTop');
}
}
window.addEventListener('scroll', move);
.content {
background-color: #ccc;
}
.content .wrap {
max-width: 600px;
margin: auto;
}
.content .wrap .title {
text-align: center;
background-color: #71ff05;
height: 100px;
line-height: 100px;
}
.content .wrap .txt {
font-size: 20px;
line-height: 3;
padding: 20px;
background-color: #fff;
}
.content .wrap .fixedTop {
position: fixed;
left: 0;
right: 0;
}
<div class="content">
<div class="wrap">
<h1 class='title'>TITLE</h1>
<p class='txt'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut eum repudiandae cum illum porro aperiam nulla, dicta amet laboriosam a quo iste repellat? Repudiandae ea quam nemo aperiam consequatur amet sint impedit libero corrupti, similique eligendi a numquam fugit sit quia accusantium blanditiis quasi asperiores optio nesciunt. Reprehenderit, ratione suscipit. Amet blanditiis odit veritatis, molestiae quod doloribus id dolore? Sequi earum odio molestiae fuga tenetur minus quia sapiente quae, eaque explicabo doloremque sit inventore quaerat nesciunt illo sed id! Dolorum illum sit aspernatur quaerat recusandae? Voluptatem accusamus soluta id similique quia nemo nisi ea ducimus numquam iste dolorum officiis corporis voluptate, sapiente nihil sunt error cupiditate, deserunt voluptas explicabo quas, nostrum culpa rem iusto. Rem veritatis eius, sequi nesciunt distinctio quis provident optio at tempore rerum beatae neque illo numquam. Unde at quidem autem, libero vel enim molestiae recusandae, atque, repudiandae minima est. Atque est quae voluptates unde itaque reprehenderit adipisci recusandae qui corporis excepturi commodi, enim esse? Corrupti illum eius soluta. Culpa et vero ratione temporibus alias dolores repudiandae provident pariatur blanditiis eum enim quod nostrum laborum, qui quisquam atque rerum sed. Soluta in omnis quod consequuntur! Voluptatem, perferendis. Culpa officiis numquam corporis explicabo reiciendis ipsam qui sequi. Reiciendis?</p>
</div>
</div>