• Register
0 votes
61 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

Please log in or register to answer this question.

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 17 views
17 views
What are the possible ways to target Html elements like (h1 ,p a,) tags with javascript file(App.js) Is there anyone who can guide me?
asked Nov 10, 2020 Han Li 710 points
0 votes
1 answer 93 views
93 views
I want to select all p elements inside a div element.
asked Oct 3, 2020 Daniel Anderson 4k points
0 votes
1 answer 6 views
6 views
Problem: I have just started off with BootStrap, however, stranded with Uncaught TypeError: $(...).datetimepicker is not a function error message. Could someone let me know what went missing with this code? Any guidance would be noteworthy
asked Mar 16 ummesalma 22.9k points
0 votes
1 answer 13 views
13 views
Problem: uncaught typeerror: $(...).datetimepicker is not a function
asked Feb 18 Ethan ross 2.3k points
0 votes
1 answer 43 views
43 views
How can i hide div based on select option value using javaScript?
asked Sep 25, 2020 Daniel Anderson 4k points
0 votes
1 answer 2 views
2 views
Problem: What to do in this case > dynamically add and remove div using jquery
asked 3 days ago Azlan2020 2.3k points
0 votes
1 answer 3 views
3 views
Problem: How to > dynamically add and remove div using jquery
asked 3 days ago Kiranaz 5.1k points
0 votes
1 answer 1 view
1 view
Problem: What is the primary advantage and disadvantage of using the <main> element vs. <div id="main">?Any sggestions/explanations can be accepted.
asked 9 hours ago Humaira ahmed 8.1k points
0 votes
1 answer 67 views
67 views
Problem hey, I want to that how to code to get a effect of image of showing full size when click on the image. provide me code of that and funtioning of that. i hope you will provide the best one.
asked Nov 13, 2020 chris jordan 2.4k points
0 votes
1 answer 43 views
43 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, 2020 sikandar 2.4k points