如何粘贴固定的div高度多于视口到身体 [英] How to stick fixed div of height more than viewport to body

问题描述

我知道div（fixed，absolute和relative）的定位。我可以附加一个固定的div到body，以便它会粘到相同的位置，同时滚动body。这里我问一个不同的问题。

I know about the positioning of div (fixed, absolute and relative). I can attach a fixed div to body so that it will stick to the same position while scrolling body. Here I am asking a little bit different question.

我有一个侧边栏的高度大于视口的高度，我想把它固定到身体。在滚动主体时，它也应该滚动，但是一旦固定的div的底部可见，它不应该与主体一起滚动。

I have a sidebar with height more than the height of viewport and I want it to be fixed to the body. While scrolling the body, it should also scroll but once the bottom of the fixed div visible, it should not scroll along with body.

例如，Facebook的右边栏

For example, the right sidebar of Facebook wall scrolls along with body and stops scrolling with body once the bottom of the right sidebar visible (fixed).

推荐答案

这是可能的

CSS：

#sidebar {
    height: 120%;
    width: 100px;
    border: 2px solid blue;
    padding: 20px;
    margin: 20px;
    position: absolute;
    top: 0;
}

jQuery：

$(document).ready(function() {
    var bottomPos = $('#sidebar').outerHeight(true) - $(window).height();
    $(window).scroll( function() {
        if ( $(window).scrollTop() > bottomPos ) {
            $('#sidebar').css({'position':'fixed','top':'auto','bottom':'0px'});
        } else {
            $('#sidebar').css({'position':'absolute','top':'0px'});
        }
    });
});

并且 演示 。

这篇关于如何粘贴固定的div高度多于视口到身体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！