Question

我的问题是，当我向下滚动屏幕时，我有一个侧边栏仍然可以解决。但是我也有一些隐藏的div，当我点击他们的名字并且希望滚动应该直到带有open div和foot div的页脚时，它会被打开。

希望你能帮助我。这是上面

的代码

css

body {
        margin: 10px auto;
        font-family: sans-serif;
        width: 500px;
    }

div {
    border-radius: 5px;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
    padding: 5px;
}

#sidebarWrap {
    height: 400px;
    width: 210px;
    float: right;
    position: relative;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
}

#main {
    width: 270px;
    height: 2000px;
}

#small {
    width: 270px;
    height: 400px;
}

#footer {
    clear: both;
    margin: 10px 0;
}

#sidebar {
    width: 200px;
    height: 300px;
    position: absolute;
}

#header {
    height: 200px;
    margin-bottom: 10px;
}

#sidebar.fixed {
    position: fixed;
    top: 0;
}


#footer { height: 600px; }

JS

$(document).ready(function() {
            $('#small').hide();
            $('p').click(function() {
                $('#small').toggle();

            });
        });
        $(function() {
        var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
        var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

        var maxY = footTop - $('#sidebar').outerHeight();

        $(window).scroll(function(evt) {
            var y = $(this).scrollTop();
            if (y > top) {
                if (y < maxY) {
                    $('#sidebar').addClass('fixed').removeAttr('style');
                } else {
                    $('#sidebar').removeClass('fixed').css({
                        position: 'absolute',
                        top: (maxY - top) + 'px'
                    });
                }
            } else {
                $('#sidebar').removeClass('fixed');
            }
        });
    });

html

<div id="sidebarWrap">
        <div id="sidebar">Sidebar</div>
    </div>

    <div id="main">
        Main
    </div>

    <p>Small</p>

    <div id="small">
        Small
    </div>

    <div id="footer">
        footer
    </div>

Answer 1

这样的东西？ http://jsfiddle.net/5Uh69/它使用纯CSS为侧边栏提供100％的高度和自己的滚动...

html, body {
    position: relative;
    height: 100%;
}

.right {
    float: left;
    background: green;
    height: 100%;
    width: 25%;
    overflow-y: scroll;
}

可滚动的SideBar达到某个div

1 个答案: