Question

我右边有一个带文字的div，右边有一个带有菜单的div。两者都包含了一个div来集中它。当用户使用文本滚动时，我可以使div正确跟随屏幕吗？我的意思是div右边保持“固定”在同一个地方，但用户可以移动并滚动文本。（这不是一个经典的固定位置。我不确定我是否应该称之为固定相对于另一个div？）

HTML：

<div id="wrapper">

<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis adipiscing dolor, eget rutrum lectus malesuada id. Phasellus vulputate, lorem et convallis vulputate, enim nulla scelerisque nunc, vel auctor orci tellus eget diam. Praesent scelerisque, mauris a molestie lobortis, lectus nisi dignissim massa, eget tempor ante sem in nisi. Proin fermentum euismod ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nec orci arcu. Nullam molestie consequat porttitor. Pellentesque sit amet nisl odio. Ut vel mi a eros commodo vehicula sagittis ut mi. Donec eu ante velit, vel ullamcorper arcu. Etiam eros sapien, lobortis a porttitor quis, congue vel velit. Nam et dui auctor augue interdum interdum.<br /><br />

</div>

<div id="right"></div>

</div><!-- final de contingut -->

CSS：

body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}

#wrapper {margin:0 auto;width:700px;height:900px;background-color:#fff;}

#right {
    float:right;
    width:200px;
    height:500px;
    right:0px;
    border:solid thin #f00;
}

#text {
    float:left;
    width:400px;
    padding:40px;
}

我在这里有一个例子：http://jsfiddle.net/u7xRX/1/

Answer 1

根据我的理解，您可以使用 javascript 。写得像这样：

$(document).scroll(
    function(){
        var scrollOffset = $(window).scrollTop();
        if(scrollOffset >= 100){
            $('#right').css({position: 'fixed',top:'0', left:'650px'});
        }
        else{
            $('#right').css({position: 'absolute',top:'100px', left:'650px'});
        }
    }
);

选中此http://jsfiddle.net/ZVrMF/1/

Answer 2

经过很长一段时间我才能找到一个只用css的解决方案。我认为在固定位置，如果你没有给出正确的位置，它从父div得到它，在这种情况下是包装器。另一方面，我添加了一个边距来定位它在右边

http://jsfiddle.net/u7xRX/3/

body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}

#wrapper {position: relative; margin:0 auto;width:700px;height:900px;background-color:#fff;}

#right {
    position: fixed;
    top: 40px;
    /* right:0px; important not give right position */
    width:200px;
    height:200px;
    margin:0 0 0 500px; /* important to position it on the right */
    background-color: red;
}

#text {
    position: absolute;
    left: 0px;
    width:400px;
    padding:40px;
}

固定相对于另一个div

2 个答案: