CSS Слайд в меню на странице с нижним колонтитулом?

Question

Я пытаюсь создать страницу с фиксированным нижним колонтитулом, но также имеет слайд в боковом меню, который не перекрывает нижний колонтитул. Я проверил множество примеров и с помощью position: absolute; для бокового меню это перекрывает нижний колонтитул, я хочу, чтобы он содержался в классе содержимого

так что-то вроде этого.

<div class="wrapper"> 
    <div class="content"> 
    <div class="sidemenu"><div> <!--This will slide in and out and push the 'page-content'--> 
    <div class="page-content"></div> 
    </div> 
    <div class="footer"></div> 
</div> 

Answer 1

попробовать этот

HTML

<div class="header">HEADER</div> 
<div class="content">This is the content</div> 
<div id="sidebar"> 
    <div id="scroller-anchor"></div> 
    <div id="scroller" style="margin-top:10px; width:270px;background:yellow"> 
     <div style="min-height: 119px; " id="cart">COntent COntent 
      <br/>COntent COntent 
      <br/>COntent COntent 
      <br/>COntent COntent 
      <br/>COntent COntent 
      <br/>COntent COntent</div> 
    </div> 
</div> 
<div id="footer">The footer lies here 

    <br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
<br/>Footer Footer Footer Footer 
</div> 

CSS

.header { 
    width:100%; 
    background:black; 
    height:20px; 
    color:#fff 
} 
.content { 
    width:70%; 
    background:blue; 
    height:1200px; 
    float:left; 
    margin-top:10px; 
    margin-bottom:10px 
} 
#sidebar { 
    width:25%; 
    background:yellow; 
    float:right; 
    margin-top:10px; 
} 
#footer { 
    width:100%; 
    background:gray; 
    height:auto; 
    clear:both 
} 

JS

$(function() { 

    var a = function() { 
     var b = $(window).scrollTop(); 
     var d = $("#scroller-anchor").offset().top; 
     var f = $("#footer").offset().top; 
     var c = $("#scroller"); 
     var h = $("#scroller").height() + 20; // margin 

     if (b > d) { 
      var myTop = $(window).scrollTop(); 
      if (myTop > f - h) myTop = f - h; 
      c.css({ 
       position: "absolute", 
       top: myTop, 
       bottom: "" 
      }) 
     } else { 
      if (b <= d) { 
       c.css({ 
        position: "absolute", 
        top: "", 
        bottom: "" 
       }) 
      } 
     } 
    }; 
    $(window).scroll(a); 
    a() 

}); 

здесь диафрагменное iddle

https://jsfiddle.net/te6ffwwh/