Question

我无法在普通浏览器上复制此问题，但它在移动设备上发生。

我使用左侧菜单中的Facebook风格幻灯片，然后将主屏幕推到右侧，我还将position:fixed应用到主屏幕，这样我就可以滚动左边的菜单而不移动现在推过主屏幕。

问题是，当我这样做时，右边的所有东西都被压扁了，例如在主屏幕上使用width:100%的主页图像缩小以适应它在右侧的微小空间。屏幕。所有文本都试图适应小空间。仅当主页固定时才会发生这种情况。

width:auto似乎导致问题。

这是jquery ......

$(document).ready(function() {
$('.btn-navbar ').toggle( 
function() {
    $('#pop-out-left').animate({ left:0 }, 100);
    $('.container').animate({ left:'87%' }, 100);
     $('.container').addClass("fixed-position");
    $('#footer').animate({ left:'87%' }, 100);
    $('#footer').addClass("display-none");
    $('#language_strip').addClass("fixed-position");

}, 
function() {
    $('#pop-out-left').animate({ left: '-87%' }, 100);
    $('.container').animate({ left: 0 }, 100);
     $('.container').removeClass("fixed-position");
    $('#footer').animate({ left: 0 }, 100);
    $('#footer').removeClass("display-none");
    $('#language_strip').removeClass("fixed-position"); 
    $(document).scrollTop(0);
}
);

CSS ......

.fixed-position {
position:fixed !important;
}

#pop-out-left { 
overflow:hidden;
position:absolute; 
width: 80%; 
border: 1px dotted gray; 
background: #fff; 
color: white; 
top:0px; 
left: -82%; 
height:auto;
min-height:600px;
padding-bottom: 00%;

}

.container {
width: auto;
 }

在移动和固定位置从左侧菜单滑动

0 个答案: