jquery body on scroll not working?

Question

Why is this not working using body? Before it was using window, however i would like this to use body. But when i add this to the code it doesn't work.

here is my fiddle

and here is my code;

 $(document).ready(function () {
        $('.timeline li .dot:first').addClass("blur");
        $('.timeline li .date:first').addClass("blur2");

    });
    var $window = $('body');

    function isScrolledIntoView($elem, $window) {
        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();

        var elemTop = $elem.offset().top;
        var elemBottom = elemTop + $elem.height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    var elements = $('.timeline li .dot');
    $('body').on('scroll', function () {
        elements.each(function () {
            $this = $(this);
            if (isScrolledIntoView($this, $window)) {
                $this.addClass("blur");
            }
            else {
                $this.removeClass("blur");
            }
        })
    });

    var elements2 = $('.timeline li .date');
    $('body').on('scroll', function () {
        elements2.each(function () {
            $this = $(this);
            if (isScrolledIntoView($this, $window)) {
                $this.addClass("blur2");
            }
            else {
                $this.removeClass("blur2");
            }
        })
    });

it should make the circles bigger as you scroll but currently its not doing it?

edit: previous fiddle, but this does not work in my code;

Because the body doesn't scroll. The whole document scrolls. — Felix Kling, Jun 22 '15 at 15:28
[Duplicate A](http://stackoverflow.com/questions/21227287/make-div-scrollable), [Duplicate B](http://stackoverflow.com/questions/18953011/how-to-make-a-div-vertically-scrollable) — NightOwlPrgmr, Jun 22 '15 at 15:35
@FelixKling... if that is the case, then why is the document's scrolling element set to body during its handler? — carinlynchin, Jul 11 '17 at 10:33

score 2 · Answer 1 · edited Nov 29 '22 at 02:00

2

I know the question is old and I'm not sure if it's still relevant but replace

$('body').on('scroll', function () {

with

$(window).scroll( function() {

The scroll event doesn't apply to body but to window.

edited Nov 29 '22 at 02:00

Michael M.

10,486
9
18
34

answered Nov 24 '20 at 17:39

Alice Media Dev Team

21
2

jquery body on scroll not working?

1 Answers1