scrollto offset variable determined by window width

Question

A window width (viewport) greater than [>=768] I have a scrollto offset variable of 125px which is my fixed header height...all good. My issue is when the window width is less than [<=767] i.e mobile device, i need the offset variable to be 54px as i have made my fixed header 54px height.

how can adjust my code to get this result

 if($(window).width() >= 768)
    function scrollToID(id, speed) {
        var offSet = 125;
        var targetOffset = $(id).offset().top - offSet;
        var mainNav = $('#main-nav');
        $('html,body').animate({scrollTop: targetOffset}, speed);
        if (mainNav.hasClass("open")) {
            mainNav.css("height", "1px").removeClass("in").addClass("collapse");
            mainNav.removeClass("open");
        }
    }

Answer 1

Well It looks like to me This whole code block only works as long as screen width is greater than 768px... Which would make it useless if it was smaller regardless. I would set it up like this.

$(window).on("resize load", function () {
            if($(window).width() >= 768) {
                var offSet = 125;
            }
            else{
                var offSet = 54;
            }
    });

function scrollToID(id, speed) {
        var targetOffset = $(id).offset().top - offSet;
        var mainNav = $('#main-nav');
        $('html,body').animate({scrollTop: targetOffset}, speed);
        if (mainNav.hasClass("open")) {
            mainNav.css("height", "1px").removeClass("in").addClass("collapse");
            mainNav.removeClass("open");
        }

or better yet you could grab the css class so you never have to set it manually.

$(window).on("resize load", function () {
                var offSet = $('#yourheader').css('height');
});