Uncaught TypeError: Cannot read the 'top' property from undefined

Question

I apologize if this question has already been given. I tried to find solutions, but could not find the appropriate code. I'm still new to jQuery.

I have two different types of sticky menus for two different pages. Here is the code for both.

$(document).ready(function () { var contentNav = $('.content-nav').offset().top; var stickyNav = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > contentNav) { $('.content-nav').addClass('content-nav-sticky'); } else {; $('.content-nav').removeClass('content-nav-sticky') } }; stickyNav(); $(window).scroll(function () { stickyNav(); }); }); $(document).ready(function () { var stickyNavTop = $('.nav-map').offset().top; // var contentNav = $('.content-nav').offset().top; var stickyNav = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('.nav-map').addClass('sticky'); // $('.content-nav').addClass('sticky'); } else { $('.nav-map').removeClass('sticky'); // $('.content-nav').removeClass('sticky') } }; stickyNav(); $(window).scroll(function () { stickyNav(); }); }); 

My problem is that the code for the sticky side menu below does not work, because the second line of code is var contentNav = $('.content-nav').offset().top; raises an error that reads "Uncaught TypeError: it is not possible to read the top property from undefined". Actually, no other jQuery code below this second line works at all if they are not located above it.

After some research, I think the problem is that $('.content-nav').offset().top cannot find the specified selector because it is on a different page. If so, I cannot find a solution.

Answer 1

Make sure the jQuery object contains some element before trying to get its offset:

 var nav = $('.content-nav'); if (nav.length) { var contentNav = nav.offset().top; ...continue to set up the menu } 

Answer 2

There is no element with a content-nav class in the document, so the .offset() method returns undefined, which does not really have a top property.

You can see for yourself this violin

 alert($('.content-nav').offset()); 

(you will see "undefined")

To avoid the failure of the whole code, you can have this code:

 var top = ($('.content-nav').offset() || { "top": NaN }).top; if (isNaN(top)) { alert("something is wrong, no top"); } else { alert(top); } 

Updated violin .

Answer 3

I know this is very old, but I understand that this type of error is a common mistake for beginners, as most beginners will call their functions when loading their header element. Seeing how this solution is not considered at all in this thread, I will add it. It is very likely that this javascript function was placed before the actual html was loaded . Remember that if you immediately call your javascript before the document is ready, elements requiring an element from the document may find the value undefined.

Answer 4

The problem that you most likely have is that the page has a link to an anchor that does not exist. For example, let's say you have the following:

 <a href="#examples">Skip to examples</a> 

There should be an element on the page with this id, for example:

 <div id="examples">Here are the examples</div> 

Therefore, make sure that each of the links is mapped within the page with a corresponding anchor.

Answer 5

I had the same problem ("Uncaught TypeError: Can't read the" top "property from undefined")

I tried every solution I could find and noticed that it helped. But then I noticed that my DIV had two identifiers.

So, I deleted the second identifier and it worked.

I just want someone to tell me to check my identifiers before))