Question

当我在http://www.myntra.com/maxima?src=tn&nav_id=1027中滚动页面时，我正在尝试修复侧栏。

现在，我可以在滚动时通过使其位置固定来修复它。但是当页脚出现时，当侧栏固定时，页脚会超过它。如何将该栏与页面底部或页脚保持一定距离，就像在该链接中一样？

   if ($(window).scrollTop() > 500) {
        $('#sidebar').css('position', 'fixed');
        $('#sidebar').css('top', '100px');
    } else {
        $('#sidebar').css('top', '0');
        $('#sidebar').css('position', 'relative');

    }

    if($('#footer').offset().top - $('#sidebar').offset().top <=     $('#sidebar').height() + 10)  {

        $('#sidebar').css('bottom', '100px');


    }

Answer 1

CSS

position: fixed;

或其他css

position:absolute;
top: 0;

或jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('#scroller').css('top', $(window).scrollTop());
    }
}
);
</script>

HTML

<div id="scroller">Some controls</div>

CSS

body {
    height: 3000px;
    top: 0;
    position: relative;
}
#scroller {
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}

滚动时如何修复侧栏

1 个答案: