CODEWITHSUNDEEP
htmlcss
user1514213
user1514213

Reputation:

CSS Slide in menu on a page with a footer?

I am trying to create a page that has a fixed footer, but also has a slide in side menu, that does not overlap the footer. I have checked a lot of examples and with using a position: absolute; for the side menu this then overlaps the footer, I want it to be contained within the content class

so something like this.

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

Upvotes: 1

Views: 525

Answers (1)

Sruthi Suresh
Sruthi Suresh

Reputation: 697

try this

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

});

here is the fiddle

https://jsfiddle.net/te6ffwwh/

Upvotes: 1

Related Questions