CSS 位置帮助（动画内容结束时显示的水平侧边栏）

Posted 2023-05-08

【中文标题】CSS 位置帮助（动画内容结束时显示的水平侧边栏）

【英文标题】：CSS Position Help (horizontal sidebar showing up when animate content over)

【发布时间】：2012-11-03 16:47:16

【问题描述】：

让我尽我所能解释我想要发生的事情，给你看我的代码，希望我能得到一些帮助。

所以，我正在尝试从屏幕左侧（就像许多移动应用程序一样）做一个滑动导航 UI。主要内容滑过，在下方显示导航菜单。

现在浏览器认为屏幕变宽并引入了水平滚动条。但是，我不希望这种情况发生......

如何让 div 在屏幕外设置动画，但不扩大屏幕宽度（即部分保持在屏幕外）？

无论如何，这是我的小提琴：http://jsfiddle.net/2vP67/6/

这是帖子中的代码：

HTML

<div id='wrapper'>
    <div id='navWide'> </div>
    <div id='containerWide'> </div>
    <div id='containerTall'>
        <div id='container'>
            <div id='nav'>
                <div id='navNavigate'> Open Menu </div>
                <div id='navNavigateHide'> Close Menu </div>
            </div>
        </div>
    </div>
    <div id='sideContainerTall'>
        <div id='sideContainer'>
            <div id='sideNav'>Side Navigation </div>
        </div>
    </div>
</div>

CSS

#wrapper 
    width:100%;
    min-width:1000px;
    height:100%;
    min-height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:0;

#navWide 
    color: #ffffff;
    background:#222222;
    width:100%;
    min-width:1000px;
    height:45px;
    position:fixed;
    top:0;
    left:0;
    z-index:100;

#containerWide 
    width:100%;
    min-width:1000px;
    min-height:100%;
    position:absolute;
    top:45px;
    z-index:100;

#containerTall 
    color: #000000;
    background:#dadada;
    width:960px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:1000;

/***** main container *****/

#container 
    width:960px;
    min-height:585px;

#nav 
    color: #ffffff;
    background:#222222;
    width:960px;
    height:45px;
    position:fixed;
    top:0;
    z-index:10000;

#navNavigate 
    background:yellow;
    font-size:10px;
    color:#888888;
    width:32px;
    height:32px;
    padding:7px 6px 6px 6px;
    float:left;
    cursor:pointer;

#navNavigateHide 
    background:yellow;
    font-size:10px;
    color:#888888;
    width:32px;
    height:32px;
    padding:7px 6px 6px 6px;
    float:left;
    cursor:pointer;
    display:none;

#sideContainerTall 
    background:#888888;
    width:264px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:500;

#sideContainer 
    width:264px;
    min-height:585px;
    display:none;

#sideContainerTall 
    background:#888888;
    width:264px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:500;

#sideContainer 
    width:264px;
    min-height:585px;
    display:none;

#sideNav 
    width:264px;
    height:648px;
    float:left;

Javascript

$(document).ready(function() 

    $('div#navNavigate').click(function() 

        $('div#navNavigate').hide();

        $('div#navNavigateHide').show();

        $('div#sideContainer').show();

        $('div#containerTall').animate(
            'left': '+=264px'
        );
    );

    $('div#navNavigateHide').click(function() 

        $('div#navNavigate').show();

        $('div#navNavigateHide').hide();
        $('div#containerTall').animate(
            'left': '-=264px'
        , function() 
            $('div#sideContainer').hide();
        );
    );

);

【问题讨论】：

你的问题到底是什么？

主要问题是使 .animate() 函数使移动的元素保持在屏幕外，而不是通过使页面更宽并产生水平滚动条来使其余元素保持在屏幕上。我还有另外两个问题，但为了简单起见，我把它们去掉了。

【参考方案1】：

因此，真正的快速解决方法是将 hidden 溢出应用到您的 html/body（您还需要像这样定义高度和宽度）：

html, body
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;

查看更新的 jsFiddle：http://jsfiddle.net/2vP67/9/

-- 编辑--

如果您想要 Facebook 或 Path 等应用程序的侧面板视图效果，那么您可以使用更简单的布局/css 来实现它。

在此处查看关于 jsFiddle 的示例：http://jsfiddle.net/2vP67/11/

这里的示例是基于 iPhone 的宽度，但您可以检测屏幕尺寸并根据需要显示内容。