document.body.scrollTop value stuck at 0

Question

I have a bit of text that I want to change when the user scrolls a certain distance. However, when I scroll, the value of document.body.scrollTop remains at 0.

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

When checking the log, the value of scroll never budges from 0, thus the text never switches from A to B when scrolling. Thanks for any help in advance.

EDIT: None of the first three answers seem to work for me. I suppose I should provide some context.

Building my design portfolio site. View the early build here. I'd like to be able to change the word "designer" in the banner to other descriptor words as the user scrolls down the page, but can't seem to be able to listen to the current scroll location.

None of the first three answers seem to work for me. I suppose I should provide some context. Building my design portfolio site. You can view the early build here: http://jndgn.com/3.0/ I'd like to be able to change the word "designer" in the banner to other descriptor words as the user scrolls down the page, but can't seem to be able to listen to the current scroll location. — John Duggan, Jul 24 '13 at 13:07

score 0 · Answer 1 · answered Jul 24 '13 at 12:32

this should do it. "document.documentElement.scrollTop" is an IE variant. should work cross browsers.

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

score 0 · Answer 2 · answered Jul 24 '13 at 12:35

0

DEMO FIDDLE

var el = $('.test');

//alert(el.scrollTop());

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

});

Try this.

answered Jul 24 '13 at 12:35

HIRA THAKUR

15,044
14
47
82

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Why are you placing that script inline within the banner? Why not implement your logic within your existing $(window).scroll(function () { as that event seems to be setting the opacity correctly on scroll.

Just add:

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);
}

Though unrelated to your issue, you should stay away from document.write whenever you can. See Why is document.write considered a "bad practice"? for more detail.

Not sure what the original problem was that caused this solution to not work, but I restructured some code and this seems to have worked the best for me. — John Duggan, Jul 29 '13 at 02:30

document.body.scrollTop value stuck at 0

3 Answers3