• Register
0 votes
47 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
0 answers 8 views
8 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 46 views
46 views
I want to select all p elements inside a div element.
asked Oct 3, 2020 Daniel Anderson 4k points
0 votes
1 answer 16 views
16 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 38 views
38 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.1k points
0 votes
1 answer 11 views
11 views
I am new to this. I was doing that but I got into some problems.
asked Nov 3, 2020 TeamScript 9.2k points
0 votes
1 answer 19 views
19 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
0 votes
1 answer 14 views
14 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, 2020 sikandar 2.4k points
0 votes
1 answer 27 views
27 views
We need multiple input fields. So, how can we add or remove multiple fields with Jquery?
asked Sep 16, 2020 Daniel Anderson 4k points
0 votes
1 answer 969 views
969 views
Problem : I am very new to Bootstrap. I always wanted to work on bootstrap so now I want to use Bootstrap to make my interface for my program. I also added jQuery 1.11.0 to a <head> tag and thought that I can work with it, but when I tried to launch my web page ... I have tried with the copies hosted on many CDNs, but I am unable to get it to work. Can someone point out which step I am missing?
asked Jan 27, 2020 jwilliam 3.9k points
0 votes
0 answers 23 views