ブートストラップカラム内の固定位置または絶対位置

Question

ユーザが左の列をスクロールするときに、右のカラムを絶対位置にしたいと考えています。私はstackoverflowとgoogleで見つけたすべての '解決策'を模倣しようとしましたが、大多数は古いものであり、誰もそのトリックを行っていませんでした。ここで

は私のマークアップです：

<div className="wrapper wrapper-content animated"> 
      <div className="row"> 
      <div className="col-lg-4 col-xl-4"> 
       { this.props.showController ? <ModelChartController handleChange={ this.handleChange } handleSavedUntilRetirementChange={ this.handleSavedUntilRetirementChange } handleSavedAfterRetirementChange={ this.handleSavedAfterRetirementChange } 
               {...this.state} /> : null } 
      </div> 
      <div className="col-lg-8 col-xl-8"> 
       <div className="absolute-wrapper"> 
       <div className="maintainPosition"> 
        <ResponsiveContainer width='100%' aspect={ 21.0/9.0 }> 
        <LineChart data={ this.state.data } margin={ { top: 5, right: 30, left: 20, bottom: 5 } }> 
         <XAxis dataKey="Age" /> 
         <YAxis dataKey="Total" /> 
         <CartesianGrid strokeDasharray="3 3" /> 
         <Tooltip/> 
         <Legend /> 
         <Line type="monotone" dataKey="Non-Retirement" stroke="#8884d8" /> 
         <Line type="monotone" dataKey="Retirement" stroke="#82aeca" /> 
         <Line type="monotone" dataKey="Total" stroke="#82ca9d" activeDot={ { r: 8 } } /> 
        </LineChart> 
        </ResponsiveContainer> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 

ここでCSS

.absolute-wrapper { 
    position: relative; 
} 

@media (min-width: 768px) { 
    .maintainPosition { 
     position: absolute; 
     top: 0; 
    } 
} 

Answer 1

まずだ、あなたが必要な場合は必ず（ちょうど位置決めのために.absoluteラッパーと.maintainPosition divをする必要はありませんありません他のスタイルのために）。

2列は「col-lg-4 col-xl-4」（左側の列）と「col-lg-8 col-xl-8」（右側の列）です。これらのdivs。

追加クラス名：クラスの

<div className="col-lg-4 col-xl-4 leftColumn"> 
... 
</div> 

<div className="col-lg-8 col-xl-8 rightColumn"> 
... 
</div> 

CSS：

.leftColumn {} 
.rightColumn { 
position: absolute; 
right: 0; 
top: 0; 
} 

あなたは別のクラス名を追加、またはそうのようなこれらのdiv要素にIDを割り当てるためにどちらかの必要

追加ID：

<div className="col-lg-4 col-xl-4" id="leftColumn"> 
... 
</div> 

<div className="col-lg-8 col-xl-8" id="rightColumn"> 
... 
</div> 

IDのCSS：

#leftColumn {} 
#rightColumn { 
position: absolute; 
right: 0; 
top: 0; 
} 

それは（親に対する）の代わりにposition: absolute;のあなたが探しているもの、（ビューポートに対して）position: fixed;を使ってみて解決されていない場合。これは非常に詳細に物事を説明します：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/