Detect body scroll offset

Question

I need to put the scrolling behaviour on the body rather than the HTML, due to using CSS Parallax. However, I have got an issue with adding sticky classes to my header using JavaScript.

I need to be able to detect that the body has scrolled, this works fine, however i'm unable to get the offset that the user has scrolled to!

I have tried everything when is online, for example:

$('body').scrollTop()
document.body.scrollTop
document.getElementsByTagName('body')[0].pageYOffset

None of this is working, it always returns 0!

Edit:

I can't modify any of the HTML apart from what is between the comments.

<html>
  <body>
    <div itemscope itemtype="http://schema.org/AutoDealer">
      <div id="main-wrap" class="parallax">
        <div class="row">
          <div class="main twelvecol">

            <!-- Editable -->
            <div>
              <div class="row-block finance parallax__group">
                <div class="parallax__layer--back parallax__layer"></div>
                <div class="wrapper">
                  <div class="container">
                    <div class="parallax__layer--base parallax__layer">
                      <p>This is all of the top level content</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- END Editable -->

          </div>
        </div>
      </div>
    </div>
  </body>
</html>

here is a codepen showing the various examples not working https://codepen.io/anon/pen/RgPrQv

Have you tried getting `document.body.scrollHeight`? Or `.offset().top`? — apires, Jun 06 '17 at 13:20
`document.body.scrollHeight` just returns the height of the document — Martyn Ball, Jun 06 '17 at 13:21
`Uncaught TypeError: document.body.offset is not a function` — Martyn Ball, Jun 06 '17 at 13:22
Pretty sure this is a known bug for Webkit. I can get a scroll position in Firefox just fine, but not in Chrome. See https://stackoverflow.com/questions/12788487/document-scrolltop-always-returns-0. As suggested in that question, I could get a scroll position in Chrome if I removed your `html` styles, but that messes up the parallax effect, so not sure what the fix is in your case. — cjl750, Jun 06 '17 at 17:34

score 0 · Answer 1 · answered Jun 06 '17 at 13:18

0

You are looking for

$(window).scroll(function() {
    $(window).scrollTop();
});

answered Jun 06 '17 at 13:18

Saksham

9,037
7
45
73

I'm not as the body is doing the scrolling, not the window. – Martyn Ball Jun 06 '17 at 13:18
There is no working example, that's the issue. See this codepen, https://codepen.io/anon/pen/RgPrQv - try and get the scroll offset of the body – Martyn Ball Jun 06 '17 at 13:34
@MartynBall can we have a outer div which wraps all of your html just inside `body`? You can get its offset – Saksham Jun 06 '17 at 13:45

Detect body scroll offset

1 Answers1