页面滚动时固定位置 DIV

Question

我有一个包含 2 列的页面。左栏比右栏长很多。

当我开始滚动时，我希望右栏保持在原来的位置，这样只有左栏移动。

这意味着当页面滚动时右栏将始终可见。

我想我需要将 div 设置为 position:fixed; 这可行，但向右移动 div 因此它位于左侧。

如何正确执行此操作才能使正确的 div 保持原位？

我也研究过使用 jquery 为滚动设置动画，但那也不起作用..

$(window).scroll(function(){
  $("#right").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

Answer 1

您需要在 #right div

上添加 position: fixed

CSS

#right {
    width: auto;
    float: right;
    top: 40px;
    background-color: #eee;
    border: 1px solid #AAAAAA;
    position: fixed;
}

演示

https://jsfiddle.net/wzzopxte/5/

Answer 2

它与 #right_container 上的 position:fixed; 一起使用，但您还必须设置 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>

Answer 3

怎么样（在代码中评论我更改的内容）

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>

页面滚动时固定位置 DIV

Fixing position on DIV while page scrolls

html

css

jquery

scroll

position