javascript - document.body.scrollTop 值停留在 0

Question

当用户滚动一定距离时，我想更改一些文本。但是，当我滚动时， 的值document.body.scrollTop仍为0。

var scroll = document.body.scrollTop;
if (scroll < 50) {
    document.write("A");
} else {
    document.write("B");
}

检查日志时，scrollnever 的值从移动，因此滚动时0文本永远不会从 切换A到。B感谢您提前提供任何帮助。

编辑：前三个答案似乎都不适合我。我想我应该提供一些上下文。

建立我的设计作品集网站。在此处查看早期构建。当用户向下滚动页面时，我希望能够将横幅中的“设计师”一词更改为其他描述词，但似乎无法收听当前的滚动位置。

Answer 1

你为什么将该脚本内嵌在横幅中？为什么不在现有的范围内实现您的逻辑，$(window).scroll(function () {因为该事件似乎在滚动时正确设置了不透明度。

只需添加：

if(scrollTop < 50){ 
   $('#banner h1').text("My name is John. I'm a designer"); 
} else { 
   $('#banner h1').text("My name is John. I'm a thinker"); 
}

---

Live Demo

if(document.attachEvent){
    document.attachEvent('onscroll', scrollEvent); 
}else if(document.addEventListener){
    document.addEventListener('scroll', scrollEvent, false); 
}

function scrollEvent(e){
    var scroll = document.body.scrollTop;

    var text = null;
    if (scroll < 50) {
        text = document.createTextNode('A');
    } else {
        text = document.createTextNode('B');
    }
    document.body.appendChild(text);
}

尽管与您的问题无关，但您应该尽可能远离document.write。请参阅为什么 document.write 被认为是“不好的做法”？了解更多详情。

Answer 2

这应该这样做。“document.documentElement.scrollTop”是一个 IE 变体。应该跨浏览器工作。

window.onscroll = function() {
  var scroll = window.scrollY || document.documentElement.scrollTop;
  if (scroll < 50) {
    document.write("A");
  } else {
    document.write("B");
  }    
}

Answer 3

演示小提琴

var el = $('.test');

//alert(el.scrollTop());

el.on('scroll', function(){
    if(el.scrollTop()>50){
  alert(el.scrollTop());
    }

});

尝试这个。