Javascript 使用 onscroll 切换可见性

Question

var headPos = window.scrollY;
window.onscroll = function(){
    headPos = window.scrollY;
}

window.onscroll = visi;

function visi(){
    if(headPos < 1300){
        document.getElementById("goBackUp").style.visibility = "hidden";
    }
    else if(headPos > 1301){
        document.getElementById("goBackUp").style.visibility = "visible";
    }
}

您好，所以我希望能够使用滚动位置在我的 html 页面上显示此 scrollToTop 按钮，但它似乎无法正常工作。

Answer 1

这么多东西，特别是你加倍的 onscroll。请参阅下面的简化示例。

const btn = document.getElementById("goBackUp");

handleScroll = () => btn.style.display = (window.scrollY < 1300) ? 'none' : 'block';

document.addEventListener('scroll', handleScroll);

#goBackUp {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background-color: #0f0;
  color: #fff;
  padding: 1rem;
  display: none;
}

<div id="goBackUp">GO BACK UP</div>

<br><br><br>
Now Scroll down....
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 2

我想你每次分配新功能时都会将分配的功能写到 window onscroll。

改用一个函数，像这样：

如果您注释掉控制台日志，您可以在每次滚动事件中看到 scrollY 值。

window.onscroll = visi;

function visi(){
 headPos = window.scrollY;
 //console.log(headPos);
    if(headPos < 1300){
        document.getElementById("goBackUp").style.visibility = "hidden";
    }
    else if(headPos > 1300){
        document.getElementById("goBackUp").style.visibility = "visible";
    }
}

<div style="background-color:black;height:1800px"></div>
<div id="goBackUp">Go back up</div>

Javascript 使用 onscroll 切换可见性

Javascript visiblity toggle with onscroll

javascript

visibility