• Register
0 votes
35 views

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 .

6 5 3
6,930 points

1 Answer

0 votes

Solution :

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

}

9 7 4
38,600 points

Related questions

0 votes
1 answer 6 views
6 views
I want to select all p elements inside a div element.
asked Oct 3 Daniel Anderson 4k points
0 votes
1 answer 7 views
7 views
How can i hide div based on select option value using javaScript?
asked Sep 25 Daniel Anderson 4k points
0 votes
1 answer 5 views
5 views
I have a form input in HTML for a password. When user type passwordit is replaced by the (*) symbol. For e.g. if a user types a password as 9876 it will show as ****. Now I want to add a feature in the form that when users hovers on it the password show and the * symbol disappear. Does anyone know how to do this? Thanks in advance.
asked Oct 9 sikandar 2.4k points
0 votes
1 answer 3 views
3 views
How to validate the 10 digits mobile number and email id using jQuery in the registration form filled by the user at the time of registering on the site?
asked Oct 9 sikandar 2.4k points
0 votes
1 answer 14 views
14 views
We need multiple input fields. So, how can we add or remove multiple fields with Jquery?
asked Sep 16 Daniel Anderson 4k points