我有一个包含2列的页面。左栏比右栏长。
当我开始滚动时，我希望右列保持原样，只有左列移动。
这意味着滚动页面时，右列始终可见。
我认为我需要将div设置为position:fixed;这样可行，但会移动正确的div，使其位于左侧。
我该如何正确地做到这一点，以便正确的div留在原地？
我还看过使用jquery为滚动设置动画，但这也不起作用..
$(window).scroll(function(){
$("#right").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
答案 0 :(得分：0)
您需要在position: fixed div
#right
CSS
#right {
width: auto;
float: right;
top: 40px;
background-color: #eee;
border: 1px solid #AAAAAA;
position: fixed;
}
样本
答案 1 :(得分：0)
它适用于position:fixed;上的#right_container，但您还必须设置right:0;
我还在容器上使用了百分比而不是固定宽度。由于position:fixed，它反应灵敏，防止div重叠，但如果你真的需要固定宽度......你可以使用它们但请记住有一些副作用
请参阅下面的代码段。让我知道它是否有帮助
body {
font-family: arial;
margin: 0px;
}
.drag {
cursor: move;
margin: auto;
background-color: white;
text-align: center;
font-size: 10pt;
opacity: 0.7;
width: 120px;
min-height: 24px;
line-height: 24px;
border: 2px solid #800000;
}
#drag {
margin: auto;
width: 100%;
display: table;
position: relative;
border: 1px solid #d9a300;
}
.list {
border: 1px solid #00b359;
min-height: 350px;
display: table;
width: 100%;
}
#left_container {
width: 63%;
float: left;
margin-right: 2%;
border-bottom: 1px solid #F6F6F6;
border: 1px solid #ff26ff;
box-sizing:border-box;
}
#left {
width: 100%;
display: table-cell;
border: 1px solid #2d00b3;
}
#right_container {
width: 33%;
float: right;
margin-right: 2%;
border-bottom: 1px solid #F6F6F6;
border: 1px solid #ffff00;
position:fixed;
right:0;
}
#right {
width: auto;
float: right;
top: 40px;
background-color: #eee;
border: 1px solid #AAAAAA;
}<div id="drag">
<fieldset><legend><b>TITLE</legend>
<div class='list'>
<!-- left container -->
<div id="left_container">
<div id="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget erat non augue vestibulum fringilla. Maecenas fermentum ante mattis interdum vestibulum. Aliquam vel dui ac turpis consectetur accumsan quis eu libero. Sed finibus neque vel ipsum lacinia lobortis. Pellentesque lorem erat, ullamcorper vitae consectetur nec, tempor sit amet nisi. Aenean posuere ante egestas quam rhoncus, ut laoreet dui mattis. Quisque condimentum fermentum metus sit amet posuere. Ut sed lectus orci.
Cras nec enim faucibus, consectetur eros ut, vulputate est. Maecenas sollicitudin vestibulum eros, sit amet porta enim molestie eget. Etiam commodo ex efficitur ligula ornare iaculis. Aliquam erat volutpat. Nullam mollis eleifend nisl a rhoncus. Sed egestas lacinia est ut mollis. Duis fermentum odio eget diam placerat, eu placerat sapien laoreet. Sed mollis leo id tortor dapibus, in finibus lacus aliquet. Donec semper vel libero eu placerat. Nam hendrerit pretium nunc, vel malesuada nisi tincidunt in. Duis ligula metus, dignissim ac laoreet in, aliquam et ipsum. Maecenas non condimentum leo. Morbi convallis turpis lobortis dignissim mattis.
Quisque at hendrerit magna. Praesent id ligula eleifend, semper lacus sed, sagittis mauris. Nulla molestie tristique sem, non ultrices nisl mattis ut. Nulla ut nisi quis elit porta tempor. Duis semper sem tellus, nec viverra metus dignissim nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla libero lectus, iaculis sit amet enim eget, facilisis blandit enim. Ut dolor massa, imperdiet id lorem a, molestie vestibulum nulla. Fusce non condimentum purus, ut egestas mi. Ut lacinia rutrum nulla a convallis. Vestibulum ac metus urna. In hac habitasse platea dictumst. In ac eleifend mi.
Duis at cursus mauris, non viverra ipsum. Sed facilisis, arcu eu aliquam volutpat, nisi leo interdum neque, in congue libero purus a eros. Pellentesque posuere tellus ut consequat dapibus. Ut dapibus ultrices sem, in posuere eros. Aliquam tincidunt, arcu a dignissim eleifend, urna diam pulvinar urna, non hendrerit lorem urna ac nibh. Cras eu feugiat enim. Aliquam ornare sapien non orci pellentesque, ac pretium felis finibus.
Suspendisse potenti. Cras placerat lorem quis purus facilisis pretium. Ut blandit vehicula erat, eget rutrum elit tempus vitae. Nulla placerat aliquet consequat. Phasellus tempus odio et augue congue venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida, odio vitae porttitor gravida, est elit imperdiet orci, nec pretium lectus risus vitae purus. Aenean dictum nisi a orci aliquet, et scelerisque tortor tincidunt.
</div>
</div><!-- left container -->
<!-- right container -->
<div id="right_container">
<div id="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit metus, euismod quis ante eleifend, tempor euismod turpis. Suspendisse a euismod nibh, nec viverra ipsum. Sed ullamcorper eros in nisi condimentum rhoncus. Nunc suscipit interdum ligula vel tempus. Donec tortor libero, gravida a condimentum at, lobortis at nibh. Pellentesque habitant.
</div>
</div>
</div><!--- list --->
</fieldset>
</div>
答案 2 :(得分：0)
这是怎么回事（在代码中评论我已经改变了）
var right = $("#right_container"); // get your right container
$(window).scroll(function() {
right.css("top", $(this).scrollTop()); // change it's top position - don't need to use animate otherwise it will be too slow
});body {
font-family: arial;
margin: 0px;
}
.drag {
cursor: move;
margin: auto;
background-color: white;
text-align: center;
font-size: 10pt;
opacity: 0.7;
width: 120px;
min-height: 24px;
line-height: 24px;
border: 2px solid #800000;
}
#drag {
margin: auto;
width: 900px;
display: table;
position: relative;
border: 1px solid #d9a300;
}
.list {
border: 1px solid #00b359;
min-height: 350px;
width: 100%;
position: relative;
/* make this relative and not a table */
}
#left_container {
/* remove float left */
width: 450px;
margin-right: 20px;
border-bottom: 1px solid #F6F6F6;
border: 1px solid #ff26ff;
}
#left {
width: 100%;
display: table-cell;
border: 1px solid #2d00b3;
}
#right_container {
position: absolute;
/* remove float right and position this absolutely, remove margin right */
top: 0;
width: 300px;
right: 20px;
border-bottom: 1px solid #F6F6F6;
border: 1px solid #ffff00;
}
#right {
width: auto;
background-color: #eee;
border: 1px solid #AAAAAA;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drag">
<fieldset>
<legend>TITLE</legend>
<div class='list'>
<!-- left container -->
<div id="left_container">
<div id="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget erat non augue vestibulum fringilla. Maecenas fermentum ante mattis interdum vestibulum. Aliquam vel dui ac turpis consectetur accumsan quis eu libero. Sed finibus neque vel ipsum lacinia lobortis. Pellentesque lorem erat, ullamcorper vitae consectetur nec, tempor sit amet nisi. Aenean posuere ante egestas quam rhoncus, ut laoreet dui mattis. Quisque condimentum fermentum metus sit amet posuere. Ut sed lectus orci.
Cras nec enim faucibus, consectetur eros ut, vulputate est. Maecenas sollicitudin vestibulum eros, sit amet porta enim molestie eget. Etiam commodo ex efficitur ligula ornare iaculis. Aliquam erat volutpat. Nullam mollis eleifend nisl a rhoncus. Sed egestas lacinia est ut mollis. Duis fermentum odio eget diam placerat, eu placerat sapien laoreet. Sed mollis leo id tortor dapibus, in finibus lacus aliquet. Donec semper vel libero eu placerat. Nam hendrerit pretium nunc, vel malesuada nisi tincidunt in. Duis ligula metus, dignissim ac laoreet in, aliquam et ipsum. Maecenas non condimentum leo. Morbi convallis turpis lobortis dignissim mattis.
Quisque at hendrerit magna. Praesent id ligula eleifend, semper lacus sed, sagittis mauris. Nulla molestie tristique sem, non ultrices nisl mattis ut. Nulla ut nisi quis elit porta tempor. Duis semper sem tellus, nec viverra metus dignissim nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla libero lectus, iaculis sit amet enim eget, facilisis blandit enim. Ut dolor massa, imperdiet id lorem a, molestie vestibulum nulla. Fusce non condimentum purus, ut egestas mi. Ut lacinia rutrum nulla a convallis. Vestibulum ac metus urna. In hac habitasse platea dictumst. In ac eleifend mi.
Duis at cursus mauris, non viverra ipsum. Sed facilisis, arcu eu aliquam volutpat, nisi leo interdum neque, in congue libero purus a eros. Pellentesque posuere tellus ut consequat dapibus. Ut dapibus ultrices sem, in posuere eros. Aliquam tincidunt, arcu a dignissim eleifend, urna diam pulvinar urna, non hendrerit lorem urna ac nibh. Cras eu feugiat enim. Aliquam ornare sapien non orci pellentesque, ac pretium felis finibus.
Suspendisse potenti. Cras placerat lorem quis purus facilisis pretium. Ut blandit vehicula erat, eget rutrum elit tempus vitae. Nulla placerat aliquet consequat. Phasellus tempus odio et augue congue venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida, odio vitae porttitor gravida, est elit imperdiet orci, nec pretium lectus risus vitae purus. Aenean dictum nisi a orci aliquet, et scelerisque tortor tincidunt.
</div>
</div><!-- left container -->
<!-- right container -->
<div id="right_container">
<div id="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit metus, euismod quis ante eleifend, tempor euismod turpis. Suspendisse a euismod nibh, nec viverra ipsum. Sed ullamcorper eros in nisi condimentum rhoncus. Nunc suscipit interdum ligula vel tempus. Donec tortor libero, gravida a condimentum at, lobortis at nibh. Pellentesque habitant.
</div>
</div>
</div><!--- list --->
</fieldset>
</div>