inside the anonymous function, use jquery to select the footer div. it has an id of 'footer'.

Question

Problem :

I have written two different types of sticky menus for two different pages. Following is the error

Inside the anonymous function, use jquery to select the footer div. it has an id of 'footer'.

Following is the code for both Menus.

$(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 issue 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 .

Answer 1

I guess your document does not contain any element with class content-nav, So your method .offset() returns undefined which infact has no top property.

You can see for yourself in below code.

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

(you will get "undefined")

To avoid failing the whole code, you can have following code instead:

var top = ($('.content-nav').offset() || { "top": NaN }).top;

if (isNaN(top)) {

    alert("something is not working, no top");

} else {

    alert(top);

}