コンテナをスクロールしている間にディビジョンが固定されているが、ブラウザで固定されていない

Question

コンテナをスクロールするときにdivを固定しておくにはどうすればよいですか？

例：

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

私は固定 '正しい' のdivを維持したいと思います。 jsfiddle：https://jsfiddle.net/yvhgv4Lw/4/に小さな例を追加しました。

Answer 1

jqueryが許可されている場合は、この方法を使用できます。

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

 
})

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; 
 
}

<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>