Question

I have a somewhat simple problem that I cant seem to figure out. I am a little new to javascript.

I am making a single page website with a fixed header. My navigation is powered by javascript function that scrolls to linked divs and offsets the top by 80px (the height of my header) and it works perfectly.

Here is the javascript:

$(document).ready(function(){

    $('#nav li a').click(function(){

        var el = $(this).attr('href');
        var elWrapped = $(el);

        scrollToDiv(elWrapped,40);

        return false;

    });

    function scrollToDiv(element,navheight){
        var offset = element.offset();
        var offsetTop = offset.top;
        var totalScroll = offsetTop - 80 + "px";

        $('body,html').animate({
                scrollTop: totalScroll
        }, 500);

    }



});

My issue is that when my website is loaded on mobile my header grows to about 215px (I am using skeleton framework), and the scroll to function still scrolls the 80px. How can I use javascript dynamically detect the height of the header and insert it into this scroll to function rather then using a fixed height?

Answer 1

$(“#header”).outerHeight() will return the total height of the #header element.