document.body.scrollTop值固定為0

Question

當用戶滾動一定距離時，我想更改一些文字。 但是，當我滾動時， document.body.scrollTop的值仍為0 。

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

檢查日志時， scroll的值永遠不會從0 ，因此滾動時文本永遠不會從A切換到B 感謝您的任何幫助。

編輯：前三個答案似乎都不適合我。 我想我應該提供一些背景信息。

建立我的設計作品集網站。 在這里查看早期版本 。 我希望能夠在用戶向下滾動頁面時將橫幅中的“設計者”一詞更改為其他描述符詞，但似乎無法收聽當前的滾動位置。

Answer 1

這應該做到。 “ 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 2

演示場

var el = $('.test');

//alert(el.scrollTop());

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

});

嘗試這個。

Answer 3

為什么將腳本內聯放置在橫幅中？ 為什么不在現有$(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"); 
}

---

現場演示

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被認為是“不良做法”？ 有關更多詳細信息。