Question

当我向下滚动1500（像素？）时，我试图得到它，底部的绝对div消失，然后如果向上滚动（滚动顶部回到1500以下）则重新出现。 / p>

不确定原因，但每当scrolltop超过1500时，div似乎会随机闪现;它应该消失，并在范围内重新出现。

为什么效果出现故障？它应该只是与显示它的类切换为无。谢谢你的帮助。

＆＃13;

window.onscroll = function() {if ((window.innerHeight + window.scrollY) >= 1500) {document.getElementById('test').classList.toggle("customstyle")}};

＆＃13;

body {
  height: 2000px;
  background: #ccc;
}
.customstyle {display: none}

＆＃13;

<body>
<div id="test" style="
    position: fixed;
    bottom: 0;
    background:  red;
    left: 0;
    padding: 20px;
    width: 100%;
    text-align:  center;
">text</div>
  </body>

＆＃13;

Answer 1

如果条件为真，那么你要说的是每次检查它时都要切换类，如果它是真的则切换类，这样它就会闪烁。

您希望将布尔值用作第二个参数。

document.getElementById('test').classList.toggle("customstyle", window.innerHeight + window.scrollY >= 1500)

Answer 2

因为你正在切换类（因此每当你超过1500px时调用滚动事件时添加和删除类），你应该在你通过1500像素时添加类，然后在你下面时删除它1500 px：

window.onscroll = function() {
    if ((window.innerHeight + window.scrollY) >= 1500) {
        document.getElementById('test').classList.add("customstyle");
    } else {
        document.getElementById('test').classList.remove("customstyle");
    }
};

Answer 3

＆＃13;

window.onscroll = function() {
  if (window.scrollY >= 1500) {
  
    document.getElementById('test').classList.add("customstyle")
  
  } else {
    document.getElementById('test').classList.remove("customstyle")
  }

};

＆＃13;

body {
  height: 2000px;
  background: #ccc;
}
.customstyle {display: none}

＆＃13;

<body>
<div id="test" style="
    position: fixed;
    bottom: 0;
    background:  red;
    left: 0;
    padding: 20px;
    width: 100%;
    text-align:  center;
">text</div>
  </body>

＆＃13;

如果scrolltop超出限制

3 个答案: