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

});

这里是小提琴

https://jsfiddle.net/te6ffwwh/

CSS在带页脚的页面上滑动菜单？

1 个答案: