Слайд-контент слева, наложить существующий контент и нажать на боковую панель

Question

В настоящее время я создаю отзывчивый сайт, и мне нужно иметь скрытый div, который будет скользить слева, после нажатия кнопки в левой боковой панели , Как только эта кнопка была нажата, боковая панель будет сдвинута с скользящего содержимого (Скользящая слева) и наложите существующее содержимое или надавите на содержимое с правой стороны.

Здесь проблема кроется в том, что это отзывчивый сайт. Я бы хотел, чтобы боковая панель в div «siteInnerLeft» была нажата в правую сторону страницы, когда новый div соскальзывает. Так что после того, как содержимое уменьшилось в предыдущем контенте, оно больше не отображается до тех пор, пока скользящее содержимое не вернется назад вне.

Вот мой JSFiddle - http://jsfiddle.net/76xvB/2/

Hopefuly вы можете увидеть, что я пытаюсь для того чтобы достигнуть. Я сумел заставить его работать до определенного момента, но проблема, с которой я столкнулся, - это скопированный контент, исправлен, и я не хочу, чтобы он исправлялся, так как есть больше контента для просмотра, и это удаляет возможность прокрутки пользователей.

Я понимаю, что «фиксированное положение» выводит элемент из потока документа. Так это остановит меня на том, что я хочу? Если да, есть ли другой способ сделать это.

ПРИМЕЧАНИЕ. Реальный сайт будет иметь процентные доли, а не пиксели, потому что он является отзывчивым, это сломанная версия.

Мой текущий код:

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; в класс .pushmenu css.

Другим способом было бы установить боковую панель как position: absolute;, а затем динамически изменить свойство top из javascript, когда пользователь попадет в нижнюю панель боковой панели.