Javascript 调整大小时Div闪烁

我在一个基于bootstrap的网站上工作，我有以下案例： 主容器和浮动左导航菜单。 浮动左导航菜单设置为“位置固定”，因为它跟随用户滚动

我想要的是，当最终用户调整窗口大小时，当主要内容与左菜单（重叠）相遇时，左菜单变为隐藏，当有足够的空间时，左菜单返回

实际上，它并没有真正起作用，它只是在眨眼。我已经编写了一些绑定到resize函数的jquery。 以下是JSFIDLE：

函数getDiffLeftMenu（div1，div2）{ var值=（$（div1.offset（）.left-$（div2.offset（）.left）； log（值-$（div2.width（））； if（值-$（div2）.width（）<0）{ 返回true； } } $（窗口）.on（'resize'，函数（事件）{ var值=（$（'.central content'）.offset（）.left-$（'#sectionsMenu'）.offset（）.left）； if（getDiffLeftMenu（“.central内容”，“sectionsMenu”））{ $（“#sectionsMenu”）.hide（）； } 否则{ $（“#sectionsMenu”）.show（）； } }).resize（）； 这可能不会有这种闪烁效应吗？ 非常感谢你的帮助。

---

关于。

好吧，你做错了，但你可以这样解决它（作为一种解决方法）：

---

这是您的逻辑解决方案，.hide（）方法使其偏移量为0，这就是它闪烁的原因（它可能会一直被隐藏）

---

这也不能保证解决方案，它仍然可以一直隐藏…非常感谢。它工作得很好！了解隐藏（）的要点。终于有逻辑了！当做

function getDiffLeftMenu(div1, div2) {
    var value = ($(div1).offset().left - $(div2).offset().left);
    console.log(value  - $(div2).width());
    if(value - $(div2).width() < 0){
        return true;
    }
}

$(window).on('resize', function(event) {

    var value = ($('.central-content').offset().left - $('#sectionsMenu').offset().left);
    if(getDiffLeftMenu('.central-content','#sectionsMenu')){
        $('#sectionsMenu').hide();
    }
    else {
        $('#sectionsMenu').show();

    }
}).resize();

$(window).on('resize', function(event) {

    var value = ($('.central-content').offset().left - $('#sectionsMenu').offset().left);
    if(getDiffLeftMenu('.central-content','#sectionsMenu')){
        setTimeout(function(){$('#sectionsMenu').hide();},20);
    }
    else {
        $('#sectionsMenu').show();

    }
}).resize();

function getDiffLeftMenu(div1, div2) {
    var value = ($(div1).offset().left - $(div2).offset().left);
    console.log(value  - $(div2).width());
    if(value - $(div2).width() < 0){
        return true;
    }
}

$(window).on('resize', function(event) {

        var value = ($('.central-content').offset().left - $('#sectionsMenu').offset().left);
        if(getDiffLeftMenu('.central-content','#sectionsMenu')){
            $('#sectionsMenu').css('opacity', 0);
        }
        else {
            $('#sectionsMenu').css('opacity', 1);

        }
    }).resize();