So I wanted to know why the .parent() of an element is returning false when compared to an $('#id') in jQuery.
I'm trying to compare them in an if statement on my code as follows:
if ($navbar.parent() === $('#sticky-wrapper'))
< [<main class="main">…</main>]
> $('main').parent() === $('body')
> $('main').parent() == $('body')
You can't really compare jQuery objects like this, as each jQuery object is different. The DOM element a jQuery object references may be the same as another, but the root jQuery object will not. It's like two different cups that contain the same type of liquid (or something along these lines, perhaps two different maps that depict the same continent is a better example).
What you can do is compare the DOM elements, through jQuery, by getting the DOM element with
$('main').parent().get(0) === $('body').get(0) // true
..much like the following will also return
$('body').parent().get(0) === $('html').get(0) // true