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 に答える