javascript - 连接速度较慢时 float JQuery 菜单问题

Question

我正在尝试创建一个 float 菜单(底部链接左侧边栏中的 #quickmenu)，该菜单停在 #weather 处。同时也重新计算 bottom = $(\'#weather\').offset().top;每 0.5 秒...

要测试的页面:Bristol International Jazz & Blues Festival 2014 | Festival Archive

重新计算是关键，因为我在主体中使用了可扩展的内容，因为如果不重新计算速度较慢的连接，它就无法工作。我只需要 #weather.offset.top每 5 秒重新计算一次，而不是整个脚本，否则它会刷新和闪烁...

我已经尝试自己编写代码，但没有用，99% 的代码不都没有正确编写代码，但不知道哪里出了问题？虽然逻辑似乎是正确的... if (y >= top && z <= bottom) { ....

<script type="text/javascript">

$(document).ready(function () {

    top = $('#quickmenu').offset().top;
    var didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
if ( didScroll ) {

    didScroll = false;
    bottom = $('#weather').offset().top;
    y = $(this).scrollTop();
    z = y + $('#quickmenu').height();

    if (y >= top && z <= bottom) {
        // if so, add the fixed class
        $('#quickmenu').addClass('fixed');
    } else if(z > bottom) {
        // otherwise remove it
        $('#quickmenu').removeClass('fixed').addClass('absolute');
    } else {
        // otherwise remove it
        $('#quickmenu').removeClass('fixed');
    }

    }   
}, 500);

});

</script>

Answer 1

感谢您的投入，对于问题中不够清晰，我们深表歉意。我通过另一种方法解决了我的问题。我希望这不会占用太多资源？

<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>