Uncaught TypeError Cannot read property top of undefined

Question

I apologize if this question has already been answered  I ve tried searching for solutions but could not find any that suited my code  I m still new to jQuery   I have two different types of sticky menus for two different pages  Here s the code for both      document  ready function          var contentNav       content-nav   offset   top      var stickyNav   function              var scrollTop     window  scrollTop            if  scrollTop  gt  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  gt  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 on the bottom doesn t work because the second line of code var contentNav       content-nav   offset   top  fires a error that reads  Uncaught TypeError  Cannot read property  top  of undefined   In fact  no other jQuery code below that second line works at all unless they are placed above it    After some researching  I think the problem is that     content-nav   offset   top can t find the specified selector because it s on a different page  If so  I can t find a solution

User · Answer

If this error appears whenever you click on the <a> tag. Try the code below.

CORRECT :

<a href="javascript:void(0)">

This malfunction occurs because your href is set to # inside of your <a> tag. Basically, your app is trying to find href which does not exist. The right way to set empty href is shown above.

WRONG :

<a href="#">

User · Answer

Check if the jQuery object contains any element before you try to get its offset   var nav       content-nav    if  nav length      var contentNav   nav offset   top       continue to set up the menu

User · Answer

I know this is extremely old  but I understand that this error type is a common mistake for beginners to make since most beginners will call their functions upon their header element being loaded  Seeing as this solution is not addressed at all in this thread  I ll add it  It is very likely that this javascript function was placed before the actual html was loaded  Remember  if you immediately call your javascript before the document is ready then elements requiring an element from the document might find an undefined value

User · Answer

I ran through similar problem and found that I was trying to get the offset of footer but I was loading my script inside a div before the footer  It was something like this    lt div gt  I have some contents  lt  div gt   lt script gt       footer   offset   top   lt  script gt   lt footer gt This is footer lt  footer gt    So  the problem was  I was calling the footer element before the footer was loaded   I pushed down my script below footer and it worked fine

User · Answer

The problem you are most likely having is that there is a link somewhere in the page to an anchor that does not exist  For instance  let s say you have the following    lt a href   examples  gt Skip to examples lt  a gt    There has to be an element in the page with that id  example    lt div id  examples  gt Here are the examples lt  div gt    So make sure that each one of the links are matched inside the page with it s corresponding anchor

User · Answer

Your document does not contain any element with class content-nav  thus the method  offset   returns undefined which indeed has no top property   You can see for yourself in this fiddle  alert     content-nav   offset        you will see  undefined    To avoid crashing the whole code  you can have such code instead   var top        content-nav   offset         top   NaN    top  if  isNaN top         alert  something is wrong  no top      else       alert top       Updated fiddle

User · Answer

I had the same problem   Uncaught TypeError  Cannot read property  top  of undefined    I tried every solution I could find and noting helped  But then I ve spotted that my DIV had two IDs   So  I removed second ID and it worked   I just wish somebody told me to check my IDs earlier

[javascript] Uncaught TypeError: Cannot read property 'top' of undefined

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to dom