Grow your CSS skills. Land your dream job.

window scroll javascript error

  • # May 13, 2013 at 10:50 am

    Hi Guys im getting a javascript error with the code below that is Cannot read property ‘top’ of undefined!
    can any of you let me know what is wrong. so basically as im scrolling a page a navigation anchor is changing to active as soon as it reaches a certain data-anchor…
    Thanks!


    var $sidebar = $(".navigation-timeline"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 70;

    $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
    $sidebar.stop().animate({
    marginTop: $window.scrollTop() - offset.top + topPadding
    });
    } else {
    $sidebar.stop().animate({
    marginTop: 0
    });
    }
    if ($(this).scrollTop() >= $('article[data-anchor="2013"]').offset().top) {
    $('.navigation-timeline a').removeClass('active');
    $('.navigation-timeline a:eq(0)').addClass('active');
    }
    if ($(this).scrollTop() >= $('article[data-anchor="2012"]').offset().top) {
    $('.navigation-timeline a').removeClass('active');
    $('.navigation-timeline a:eq(1)').addClass('active');
    }
    if ($(this).scrollTop() >= $('article[data-anchor="2011"]').offset().top) {
    $('.navigation-timeline a').removeClass('active');
    $('.navigation-timeline a:eq(2)').addClass('active');
    }
    if ($(this).scrollTop() >= $('article[data-anchor="2010"]').offset().top) {
    $('.navigation-timeline a').removeClass('active');
    $('.navigation-timeline a:eq(3)').addClass('active');
    }
    });

    # May 13, 2013 at 10:57 am

    I’m on my phone at the moment so I can’t dig too deep into it, but if you provided a live example we could see on what line the error is being produced. Maybe a reduced test case on Codepen.

    Other than that, there are some basic optimization a that can be made to your code. I’ll try to hit this thread up when I get into the office later.

    # May 13, 2013 at 11:32 am

    Hi The Doc
    thanks. here it goes.
    [Test Code pen…](http://cdpn.io/xeABa “test”)

    # May 13, 2013 at 11:41 am

    What browser? Seems fine on Chrome 26.

    # May 13, 2013 at 11:51 am

    @CrocoDillon its chrome. im loading all the js in the footer btw! apparently everytime i get to a new element the message pops up for me. d.

    # May 13, 2013 at 11:56 am

    actually jquery offset is a function
    use offset().top

    EDIT you are using it in the pen ,i get no errors latest chrome and firefox

    # May 13, 2013 at 12:12 pm

    hmmm this is really strange
    this is what i get on the console
    Uncaught TypeError: Cannot read property 'top' of undefined global.js:43
    (anonymous function) global.js:43
    b.event.dispatch jquery.min.js:3
    v.handle

    line 43 on my global.js is
    if ($window.scrollTop() > offset.top) {

    thanks guys…

    # May 13, 2013 at 12:19 pm

    probably you cant access the offset variable inside the callback function try redeclaring it inside the callback in .scroll()

    # May 13, 2013 at 12:44 pm

    hi pixelgrid. i tried something but no luck. what do you mean redeclaring it? its strange because as soon as i start scrolling the error kicks in the console severa times TypeError: offset is undefined if ($window.scrollTop() > offset.top) {

    # May 13, 2013 at 12:51 pm

    the scroll event fires multiple times durring a scroll thats why the many errors
    try

    $window.scroll(function() {
    var offset = $(“.navigation-timeline”).offset();
    if ($window.scrollTop() > offset.top) {
    $sidebar.stop().animate({
    marginTop: $window.scrollTop() – offset.top + topPadding
    });
    } else {
    $sidebar.stop().animate({
    marginTop: 0
    });
    }……(rest of code)

    # May 13, 2013 at 1:54 pm

    Here’s a really stripped down version of the scrolling: http://codepen.io/ggilmore/pen/931d869cb3d20d4d02744e5a9a4a049c

    Though, you’d probably just be better off using `position: fixed` on the nav. The animation of the nav only distracts.

    # May 13, 2013 at 2:05 pm

    Thks for that TheDoc but my main intention with this, is every time that the nav passes by a new data-anchor it gets a class of active on the new year on the nav and with that is just doing the scrolling…

    # May 13, 2013 at 2:35 pm

    That’s where the error was occurring in your previous code, I believe, so I just fixed that area up.

    # May 13, 2013 at 2:49 pm

    ah ok! but still getting the same error with that stripped down code. a thing that i notice though is that if i just keep 2 instances of the if ($(this).scrollTop() >= $('article[data-anchor="2013"]').offset().top) {
    $('.navigation-timeline a').removeClass('active');
    $('.navigation-timeline a:eq(0)').addClass('active');

    the error disappears but if i had another one. it comes back again! so the scroll event is fired many times. is there anyway to prevent that?

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".