Calling javascript function's result into Jquery css event, on load and resize

Viewed 84

I want to call logoSocialHeight() function's result into $('header.main').css('top',logoSocialHeight()).hover(

It should only trigger this when the window loads or viewport will be resized. I try to call everything here below 1600px screen resolution. However logoSocialHeight() only works if I first loading the webpage more than 1600px resolution, than I shrink it down to below 1600px and it will be triggered, otherwise not.

Is there a Jquery way of window.addEventListeners, like with $(window).on('load resize'?

function logoSocialHeight() {
  var logoHeight = $('header.main .logo').outerHeight(true);
  var socialHeight = $('header.main .social-links').outerHeight(true);
  var sum = -Math.abs(logoHeight + socialHeight - 10);
  console.log(sum);
  return sum;
};
window.addEventListener('load', logoSocialHeight, false);
window.addEventListener('resize', logoSocialHeight, false);

function bindNavUp() {
  var lastScrollTop = 0, delta = 5;

  $(window).on('scroll', function() {
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta) {
      return;
    };

    if (st > lastScrollTop) {
      // downscroll code
      $('header.main').css('top',logoSocialHeight()).hover(
        function() {
          $('header.main').css('top','0');
        }
      );
    }
    else {
      // upscroll code
      $('header.main').css('top','0');
    };
    lastScrollTop = st;
  });
};
function unbindNavUp() {
  $(window).unbind('scroll');
};
function handleNavUp() {
  if ($(window).width() < 1600) {
    bindNavUp();
  }
  else {
    unbindNavUp(); 
  };
};
$(document).ready(function() {
  var timer;
  $(window).on('load resize scroll', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleNavUp();  
    }, 100);
  });
  handleNavUp();
});

UPDATE:

Working, simplified code:

function logoSocialHeight() {
  var logoHeight = $('header.main .logo').outerHeight(true);
  var socialHeight = $('header.main .social-links').outerHeight(true);
  var sum = -Math.abs(logoHeight + socialHeight - 10);
  //console.log(sum);
  return sum;
};
function bindNavUp() {
  var lastScrollTop = 0, delta = 5;
  $(window).on('scroll', function() {
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta) {
      return;
    };

    if (st > lastScrollTop) {
      // downscroll code
      $('header.main').css('top',logoSocialHeight()).hover(
        function() {
          $('header.main').css('top','0');
        }
      );
    }
    else {
      // upscroll code
      $('header.main').css('top','0');
    };
    lastScrollTop = st;
  });
};
function unbindNavUp() {
  $(window).unbind('scroll');
};
$(window).on('load resize', function() {
  if ($(this).width() < 1600) {
    bindNavUp();
  }
  else {
    unbindNavUp();
  };
});
1 Answers
Related