CSS Slide im Menü auf einer Seite mit einer Fußzeile? - html, CSS

Ich versuche eine Seite zu erstellen, die eine feste Fußzeile hat, aber auch eine Folie im Seitenmenü hat, die die Fußzeile nicht überlappt. Ich habe viele Beispiele überprüft und a position: absolute; für das Seitenmenü überlappt dies dann die Fußzeile, ich möchte, dass sie in der Inhaltsklasse enthalten ist

so etwas wie das.

<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>

Antworten:

Versuche dies

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()

});

Hier ist die Geige

https://jsfiddle.net/te6ffwwh/