javascript - 从左侧滑入内容，覆盖现有内容并插入侧边栏

Question

我目前正在构建一个响应式网站，我需要一个隐藏的 div，它会在单击左侧栏中的按钮后从左侧滑入。按下此按钮后，侧边栏将被推过滑动内容(从左侧滑动)并覆盖现有内容或推过右侧的内容。

这就是问题所在，因为它是一个响应式网站。当新的 div 滑入时，我希望将“siteInnerLeft”div 中的侧边栏推到页面的右侧。因此，在内容滑动之后，之前的内容不再可见，直到滑动内容滑回出。

这是我的 JSFiddle - http://jsfiddle.net/76xvB/2/

希望您能看到我正在努力实现的目标。我一直想让它工作到一定程度，但我遇到的问题是滑入的内容是固定的，我不希望它被固定，因为有更多内容要查看，这会消除用户滚动的能力。

我理解“固定位置”将元素从文档流中移除。那么这会阻止我实现我想要的吗？如果是这样，是否还有另一种方法。

注意:真实网站将具有百分比而不是像素，因为它是响应式的，这是一个分解版本。

我当前的代码:

HTML

<div id="siteWrapper">
    <div id="siteInnerLeft">
        <div id="homeNavLink">
            <p>Click me</p>
        </div>
    </div>
    <div id="siteInnerRight">
       <div class="pushmenu-push">
           <p>Current page content</p>
        </div>
        <div class="pushmenu pushmenu-left">
            <p>Content to slide in from the left</p>
        </div>
        <div id="footer">
             <p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p>
        </div>
    </div>      
</div>

CSS

#siteWrapper{
    max-width:500px;
    margin:0 auto;
    width:100%;    
}

#siteInnerLeft{
    background-color:green;
    width:100px;
    float:left;
    position:fixed; /* Sidebar that needs to be fixed*/
}

#siteInnerRight{
    width: 400px;
    background-color:yellow;
    float:left;
    margin-left: 100px; /*Compensates for fixed header width */
}

.pushmenu {
    background: #e9e8e0;
    font-family: georgia,times news roman, times, serif;
    position: fixed;
    width:400px;
    height: 100%;
    top: 0;
    z-index: 1000;
}


.pushmenu-push{
    left: 0;
    overflow-x: hidden;
    position: relative;
    width: 100%;  

}

.pushmenu-left{
    left:-400px;
}

.pushmenu-left.pushmenu-open {
        left: 0px;
       /* box-shadow: 5px 5px 5px #d9d8d0;*/
}

.pushmenu, .pushmenu-push {
    transition: all 0.3s ease 0s;
}

#footer{
    width:100%;
    clear:both;
    background-color:red;
}

jQuery

$menuLeft = $('.pushmenu-left');
$nav_list = $('#homeNavLink');

$nav_list.click(function() {
    $(this).toggleClass('active');
    $('.pushmenu-push').toggleClass('pushmenu-push-toright');
    $menuLeft.toggleClass('pushmenu-open');
});

如有任何建议，我们将不胜感激。

谢谢。

Answer 1

转换 完成后，更改侧边栏的位置，使其不再固定。以下链接上的答案很好地分解了它并且有质量引用: Callback when CSS3 transition finishes