Question

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

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

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

Hopefuly你可以看到我想要实现的目标。我已经实现了它的工作直到一个点，但我的问题是内容滑入是固定的，我不希望它被修复，因为有更多的内容要查看，这消除了用户滚动的能力。 / p>

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

注意：真实网站的百分比不是像素，因为它是响应式的，这是一个细分版本。

我目前的代码：

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

完成transition后，更改侧边栏的position，使其不再fixed。以下链接的答案很好地分解了它并且有质量参考： Callback when CSS3 transition finishes

Answer 2

如果侧栏固定，您可以在内部创建一个滚动条，以便文本可以查看;您可以通过在overflow-y: auto; css类中添加.pushmenu来完成此操作。

另一种方法是将侧边栏设置为position: absolute;，然后在用户点击侧边栏底部时从javascript动态更改top属性。

从左侧滑入内容，覆盖现有内容并推送到侧边栏

2 个答案: