jquery - Refresh a function on $(window).resize using headroom.js

Question

I'm trying to initiate the script from headroom.js (http://wicky.nillia.ms/headroom.js/) to trigger when an element hits the top of the page. The position of the element will change if the window is resized.

My problem: the offset value of the function doesn't want to work with it on $(window).resize. The variable offset updates its value but the function doesn't use it after it has been defined once.

Here is my code: https://jsfiddle.net/kh4jv748/7/

jquery:

    //http://wicky.nillia.ms/headroom.js/ is already called 


    function updateViewportDimensions() {
        var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
        return { width:x,height:y };
    }
    // setting the viewport width
    var viewport = updateViewportDimensions();





    $(document).ready(function() {


    // initiate the headroom plugin to change nav bar behaviour


    function headroom (Offset){
        if( typeof Offset === "undefined" )  var Offset = 50; 
        var $offset = Offset;
        console.log('Vertical offset position from "trigger"', Offset);
        console.log('function headroom initiated');

        $(".top-menu").headroom({
          "offset": $offset,
          "tolerance": {
            "up" : "12", //tolerance scroll back 
            "down" : "0" // tolerance scroll 
            },
          "classes": {
            "initial": "animated",
            "pinned": "slideDown",
            "unpinned": "slideUp",
            "top" : "headroom--top",
            "notTop" : "headroom--not-top"
          }
        });
    };

    headroom();

    $(window).resize(function () {

        var home = $('body').hasClass('home');

        // if we're on the home page, we wait the set amount (in function above) then fire the function
        if( home ) { setTimeout( function() {

        // update the viewport, in case the window size has changed
        viewport = updateViewportDimensions();

          // if we're below 768 fire this off
          if( viewport.width < 768 ) {
            console.log('Home page < 768.');
            var Offset = 0;

          } else {
            // otherwise, let's do this instead
            console.log('Home page > 768');
            var Offset = $("#trigger").offset();
            var Offset = Offset.top
          }

          headroom(Offset);

        }, 2000, "headroom"); }

        else{ setTimeout( function() {
            console.log('Not on home page resized');

            viewport = updateViewportDimensions();

                if( viewport.width < 768 ) {
                console.log('Home page < 768.');
                var Offset = 0;
                console.log(Offset);

              } else {
                // otherwise, let's do this instead
                console.log('Home page > 768');
                var Offset = 500;
                console.log(Offset);
              }

              headroom(Offset);

            }, 2000, "headroom");

        };

    });


    });

Answer 1

.headroom('destroy').removeData('headroom') 

to restart the function and launch a new one with new val

$(window).resize(function () {

// if we're on the home page, we wait the set amount (in function above) then fire the function
if( is_home ) { waitForFinalEvent( function() {

// update the viewport, in case the window size has changed
viewport = updateViewportDimensions();

  // if we're above or equal to 768 fire this off
  if( viewport.width < 768 ) {
    //console.log('Home page < 768.');
    var Offset = 0;

  } else {
    // otherwise, let's do this instead
    if ($('html #slider-pro-1 .quote').length) { var Offset = $(".widget_image-bubbles-widget").offset();
    var Offset = Offset.top - 80; }
    else { var Offset = 500; }
  }
  $(".header").headroom('destroy').removeData('headroom');
  headroom(Offset);

}, 1000, "your-function-identifier-string"); }

else{ waitForFinalEvent( function() {
    //console.log('Not on home page resized');

    viewport = updateViewportDimensions();

        if( viewport.width < 768 ) {
        var Offset = 0;

      } else {
        // otherwise, let's do this instead
        var Offset = 500;
      }
      $(".header").headroom('destroy').removeData('headroom');
      headroom(Offset);

    }, 1000, "your-function-identifier-string");

};

});