将javascript函数的结果调用到Jquery css事件中,加载和调整大小
Calling javascript function's result into Jquery css event, on load and resize
我想将函数的结果调用logoSocialHeight()
$('header.main').css('top',logoSocialHeight()).hover(
它应该仅在窗口加载或视口调整大小时触发此操作。我尝试在低于 1600px 的屏幕分辨率下调用这里的所有内容。但是logoSocialHeight()
只有当我首先加载分辨率超过 1600 像素的网页时才有效,而不是将其缩小到 1600 像素以下,它将被触发,否则不会。
有没有一种 Jquery 方法来window.addEventListener
s,就像 $(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();
});
更新:
工作,简化的代码:
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();
};
});
我会发表评论,但遗憾的是我<50 次,所以我不被允许并被迫在这里写。我不确定这是否会对您有所帮助,因为我不太熟悉 JQuery,但是当您在纯 JavaScript 中添加事件侦听器时,您在注册时不能使用括号"()"。您只需命名函数。
$('header.main').css('top',logoSocialHeight).hover(
相关文章:
- Adobe Air SDK在页面加载时调整窗口大小
- 加载图像后调整HTML画布的大小
- 加载/调整大小时未切换图像数据标记
- 仅当窗口宽度>940像素,无论是通过页面加载还是调整大小
- Iframe加载调整大小在Chrome中工作,但不能在IE或Firefox中工作
- 如果iframe通过单击加载,则自动调整iframe大小无效
- 在调整大小和加载时移动 DOM 元素.仅适用于调整大小
- 页面加载时调整画布大小
- 如何从调整大小或拉伸的src加载图像
- 在没有新行的情况下调整td中的动态加载内容
- 调整从其他域加载的iframe/object标记的内容大小
- 预加载和调整图像大小jQuery/Javascript
- 预加载图像,使其不会't在加载过程中重新调整大小
- 我的<画布>加载特定PDE文件时调整大小
- 加载新内容时调整iframe的高度
- 满足某些条件时窗口大小调整和文档加载的 jQuery
- 文本区域在页面加载时未正确调整文本量的大小
- 在调整窗口大小时重新加载 jQuery 轮播以将方向从垂直更改为垂直
- 将javascript函数的结果调用到Jquery css事件中,加载和调整大小
- 在 Javascript 中强制 dom 重新加载/调整大小