Question

我正在开发基于bootstrap的网站，我有以下情况：主容器和浮动左侧导航菜单。浮动左侧导航菜单设置为固定位置，因为它跟随用户滚动。

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

实际上，它并没有真正起作用，它正在闪烁。我已经写了一些jquery绑定到resize函数。这是jsfiddle：

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

这可能没有这个闪烁的效果吗？非常感谢您的帮助。问候。

Answer 1

这是你的逻辑解决方案，.hide（）方法使它有偏移量0，这就是它闪烁的原因（它可能一直被卡住）。

https://jsfiddle.net/cuw46rsv/7/

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

Answer 2

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

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

https://jsfiddle.net/cuw46rsv/6/

调整大小时Div闪烁

2 个答案: