window scroll javascript error

[sabas]

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


[TheDoc]

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.

[sabas]

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

[CrocoDillon]

What browser? Seems fine on Chrome 26.

[sabas]

@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.

[pixelgrid]

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

[sabas]

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…

[pixelgrid]

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

[sabas]

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) {

[pixelgrid]

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)

[TheDoc]

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.

[sabas]

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…

[TheDoc]

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

[sabas]

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?

[Author]

Posts