Javascript 连接较慢时出现浮动JQuery菜单问题
我正在尝试创建一个浮动菜单(Javascript 连接较慢时出现浮动JQuery菜单问题,javascript,jquery,html,css,menu,Javascript,Jquery,Html,Css,Menu,我正在尝试创建一个浮动菜单(\quickmenu位于底部链接的左侧边栏),它在\weather处停止,同时还重新计算底部=$(\'\weather\').offset().top每0.5秒一次 要测试的页面: 重新计算是关键,因为我在主体中使用了可扩展的内容,因为如果不在较慢的连接上重新计算,它将无法工作。我只需要每隔5秒重新计算一次#weather.offset.top,而不是整个脚本,否则它会刷新并闪烁 我试着自己编写代码,但它不起作用,99%编码不正确,但无法找出哪里出了问题?虽然逻辑似乎
\quickmenu
位于底部链接的左侧边栏),它在\weather
处停止,同时还重新计算底部=$(\'\weather\').offset().top代码>每0.5秒一次
要测试的页面:
重新计算是关键,因为我在主体中使用了可扩展的内容,因为如果不在较慢的连接上重新计算,它将无法工作。我只需要每隔5秒重新计算一次#weather.offset.top
,而不是整个脚本,否则它会刷新并闪烁
我试着自己编写代码,但它不起作用,99%编码不正确,但无法找出哪里出了问题?虽然逻辑似乎是正确的<代码>如果(y>=top&&z=top&&z-bottom){
//否则,请将其移除
$('#quickmenu')。removeClass('fixed')。addClass('absolute');
}否则{
//否则,请将其移除
$(“#快速菜单”).removeClass('fixed');
}
}
}, 500);
});
感谢您的输入,并为问题不够清晰表示歉意。我通过采取另一种方法解决了我的问题。我希望这是一个资源较少的沉重
<script type="text/javascript">
(function () {
var s = document.querySelector(\'#event-info\').style;
s.overflow = \'inherit\';
s.height = \'auto\';
})();
window.updateQuickMenuPos = function () {
var menu = document.querySelector(\'#quickmenuwrapper\');
var scroll_pos = document.body.scrollTop;
var menu_pos = menu.offsetTop + 10;
var weather = document.querySelector(\'#weather\');
var pos = (scroll_pos - menu_pos);
// min height
if (pos < 0) {
pos = 0;
}
// max height
if (menu_pos + menu.offsetHeight + pos > weather.offsetTop) {
pos = weather.offsetTop - menu.offsetHeight - menu_pos;
}
var s = menu.style;
s[\'webkitTransform\'] = s[\'mozTransform\'] = s[\'transform\'] = \'translateY(\' + pos + \'px)\';
};
jQuery(document).scroll(window.updateQuickMenuPos);
</script>
(功能(){
var s=document.querySelector(\'\\事件信息\').style;
s、 溢出=\'inherit\';
s、 高度=\'auto\';
})();
window.updateQuickMenuPos=函数(){
var menu=document.querySelector(\'#quickmenuwrapper\');
var scroll_pos=document.body.scrollTop;
var menu_pos=menu.offsetTop+10;
var weather=document.querySelector(\'#weather\');
变量位置=(滚动位置-菜单位置);
//最小高度
如果(位置<0){
pos=0;
}
//最大高度
if(menu_pos+menu.offsetHeight+pos>weather.offsetTop){
pos=weather.offsetTop-menu.offsetHeight-menu\pos;
}
var s=menu.style;
s[\'WebKittTransform\']=s[\'mozTransform\']=s[\'transform\']=\'translateY(\'+pos+\'px)\';
};
jQuery(document).scroll(window.updateQuickMenuPos);
很抱歉,您的问题不是最容易理解的。首先,我一辈子都搞不明白为什么像你现在使用的那样的间隔方法是必要的。在速度较慢的机器上(会有惊人数量的访问者使用),这将是性能的杀手。
<script type="text/javascript">
(function () {
var s = document.querySelector(\'#event-info\').style;
s.overflow = \'inherit\';
s.height = \'auto\';
})();
window.updateQuickMenuPos = function () {
var menu = document.querySelector(\'#quickmenuwrapper\');
var scroll_pos = document.body.scrollTop;
var menu_pos = menu.offsetTop + 10;
var weather = document.querySelector(\'#weather\');
var pos = (scroll_pos - menu_pos);
// min height
if (pos < 0) {
pos = 0;
}
// max height
if (menu_pos + menu.offsetHeight + pos > weather.offsetTop) {
pos = weather.offsetTop - menu.offsetHeight - menu_pos;
}
var s = menu.style;
s[\'webkitTransform\'] = s[\'mozTransform\'] = s[\'transform\'] = \'translateY(\' + pos + \'px)\';
};
jQuery(document).scroll(window.updateQuickMenuPos);
</script>