2

我有一个右侧带有文本的 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/

4

2 回答 2

4

据我了解，您可以为此使用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/

于 2012-09-18T09:16:48.727 回答
0

很长一段时间后，我可以找到仅使用 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;
}
于 2012-11-24T16:50:09.850 回答