Div在滚动容器时固定,但在浏览器中不固定

时间:2017-01-16 07:44:39

标签: html css

如何在容器中滚动时保持div固定,但在浏览器中滚动时必须可以移动div。

示例:

<div id="container"> 
  <div id="left">
  </div>
  <div id = "right">
    Movable div
  </div>
</div>

我想保持div'正确'。在这个jsfiddle中添加了一个小例子:https://jsfiddle.net/yvhgv4Lw/4/

1 个答案:

答案 0 :(得分:1)

如果允许jquery,您可以使用此方法。

&#13;
&#13;
$('document').ready(function() {
  $(window).scroll(function() {
    $('#right').css('position', 'absolute');
  })
  $('#container').scroll(function() {
    $('#right').css('position', 'fixed');
  })

})
&#13;
body{
  margin:0;
  padding:0;
}
#container {
  height: 900px;
  overflow-y: scroll;
  position: relative;
  background-color: red;
}
#left {
  float: left;
  width: 60%;
}
#right {
  height: 300px;
  float: right;
  width: 37%;
  position: fixed;
  background-color: blue;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
dining so he my around to. We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion
    conveying. That his west quit had met till. Of advantage he attending household at do perceived. Middleton in objection discovery as agreeable. Edward thrown dining so he my around to. We diminution preference thoroughly if. Joy deal pain view much
    her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion conveying. That his west quit had met till. Of advantage he attending household at do perceived. Middleton in objection discovery as agreeable. Edward
    thrown dining so he my around to. We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion conveying. That his west quit had met till. Of advantage
    he attending household at do perceived. Middleton in objection discovery as agreeable. Edward thrown dining so he my around to. Kindness to he horrible reserved ye. Effect twenty indeed beyond for not had county. The use him without greatly can private.
    Increasing it unpleasant no of contrasted no continuing. Nothing colonel my no removed in weather. It dissimilar in up devonshire inhabiting. Quick six blind smart out burst. Perfectly on furniture dejection determine my depending an to. Add short
    water court fat. Her bachelor honoured perceive securing but desirous ham required. Questions deficient acuteness to engrossed as. Entirely led ten humoured greatest and yourself. Besides ye country on observe. She continue appetite endeavor she judgment
    interest the met. For she surrounded motionless fat resolution may. At every tiled on ye defer do. No attention suspected oh difficult. Fond his say old meet cold find come whom. The sir park sake bred. Wonder matter now can estate esteem assure fat
    roused. Am performed on existence as discourse is. Pleasure friendly at marriage blessing or. Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended
    vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who. Sportsman do offending supported extremity breakfast by listening. Decisively advantages nor expression unpleasing she led
    met. Estate was tended ten boy nearer seemed. As so seeing latter he should thirty whence. Steepest speaking up attended it as. Made neat an on be gave show snug tore. Are sentiments apartments decisively the especially alteration. Thrown shy denote
    ten ladies though ask saw. Or by to he going think order event music. Incommode so intention defective at convinced. Led income months itself and houses you. After nor you leave might share court balls. Behind sooner dining so window excuse he summer.
    Breakfast met certainty and fulfilled propriety led. Waited get either are wooded little her. Contrasted unreserved as mr particular collecting it everything as indulgence. Seems ask meant merry could put. Age old begin had boy noisy table front whole
    given. Remain valley who mrs uneasy remove wooded him you. Her questions favourite him concealed. We to wife face took he. The taste begin early old why since dried can first. Prepared as or humoured formerly. Evil mrs true get post. Express village
    evening prudent my as ye hundred forming. Thoughts she why not directly reserved packages you. Winter an silent favour of am tended mutual. Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging
    he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
  </div>
  <div id="right">
    Movable div
  </div>
</div>
&#13;
&#13;
&#13;