• Register
0 votes
32 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.9k 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);

}

36.1k points

Related questions

0 votes
1 answer 523 views
523 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 jwilliam 3.9k points
0 votes
1 answer 166 views
166 views
Problem : I am unable to solve my link problem. Can anybody help on to this to link the CSS and JS File? I am facing below error : Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/ ... .js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/Jquery/prettify.js
asked Jan 10 alecxe 7.5k points
0 votes
1 answer 7 views
7 views
Problem: I have recently started learning JQuery for my new project. I am the only developer in my team. I am trying to check if the checkbox in my checkbox array is checked using a id of my checkbox array? I have already written a code for it. Please find below my code ... { return false; } else { return true; } } I am looking for the Jquery expert who can help me in fixing my above JQuery code.
asked Jul 13 Raphael Pacheco 2.7k points
0 votes
1 answer 1.5K views
1.5K views
Problem : I am trying to execute bootstrap jquery code but getting below error uncaught error: bootstrap's javascript requires jquery at bootstrap.min.js:6
asked Oct 22, 2019 peterlaw 6.9k points
0 votes
1 answer 30 views
30 views
Problem: I am new and learning, I need help, can anyone help by filling in the blanks? When CSS is coded in the body of the web page as an attribute of an HTML tag it is called _____?
asked Feb 21 maddi86 5.4k points