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();
};
});