英文:
Displaying back on scroll up an object hidden on scroll down
问题
I've been successful on hiding a div on scroll, but I thought the code would display the div back again on scrolling back, but it does not. How can I do that?
<body>
<div class="imagem-capa">
<img src="https://www.collinsdictionary.com/images/full/apple_158989157.jpg"></div>
<div class="random"></div>
<script src="pen.js"></script>
</body>
.random {
background-color: red;
height: 500px;
}
.imagem-capa img {
height: 500px;
}
let capa = document.getElementsByClassName("imagem-capa");
console.log(capa);
document.addEventListener("scroll", function () {
let scrollPosition = window.pageYOffset;
if (scrollPosition <= 50) {
capa[0].style.display = 'block' - scrollPosition / 50;
} else {
capa[0].style.display = 'none'
}
});
英文:
I've been successful on hiding a div on scroll, but I thought the code would display the div back again on scrolling back, but it does not. How can I do that?
<body>
<div class="imagem-capa">
<img src="https://www.collinsdictionary.com/images/full/apple_158989157.jpg"></div>
<div class="random"></div>
<script src="pen.js"></script>
</body>
.random {
background-color: red;
height: 500px;
}
.imagem-capa img {
height: 500px;
}
let capa = document.getElementsByClassName("imagem-capa");
console.log(capa);
document.addEventListener("scroll", function () {
let scrollPosition = window.pageYOffset;
if (scrollPosition <= 50) {
capa[0].style.display = 'block' - scrollPosition / 50;
} else {
capa[0].style.display = 'none'
}
});
答案1
得分: 1
你的JavaScript代码中有一个错误，请移除 - scrollPosition / 50。
if (scrollPosition <= 50) {
capa[0].style.display = 'block';
} else {
capa[0].style.display = 'none';
}
英文:
you made mistake in your js code, remove - scrollPosition / 50.
if (scrollPosition <= 50) {
capa[0].style.display = 'block';
} else {
capa[0].style.display = 'none'
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论