2
左端のサイドバー列に「位置：固定」プロパティが適用されたときに、2つのブートストラップ列が左にシフトする問題があります。固定位置プロパティは、この列がウィンドウの一番上に達すると適用されます。そうでない場合は、この列は静的です。私はJQueryでこれをやっています。 JQueryコードを起動して固定位置プロパティを適用する前に、すべてが適切に整列されています。固定位置が一番左側のサイドバーの列に追加されると、「空白」があり、問題の2つの列がそれを埋めるために残っていると考えています。固定位置付けが適用された後、ブートストラップ3列が水平方向にシフトします。
詳細は以下のコードです。私の説明が不明な場合はお詫び申し上げます。
HTML：
#fixed1ブラウザウィンドウの上部にページをスクロールした後に固定されている一番左のサイドバーの列です。私は#fixed1はjQueryのを介して固定された位置に変更された後に左シフトしている二つの列の横に2" 列をシフト「列1をシフト」&コメント
<div class="container-fluid">
<div class="row" id="places-container">
<!-- Begin Places Side Box -->
<div class="col-md-2" id="fixed1">
<p>Places</p>
<br>
<img src="images/places-logo.svg" id="sidebarLogo" class="center-block" style="width: 50px;">
<br>
<span id="places-text">
fill text fill text fill text fill text
</span>
</div>
<!-- End Places Side Box -->
<!-- Shifting Column 1 --> <!-- Begin Places Images -->
<div class="col-md-5">
<img src="images/places-img1.jpg" class="center-block">
</div>
<!-- Shifting Column 2 --> <div class="col-md-5">
<img src="images/places-img2.jpg" class="center-block">
</div>
<div class="col-md-10 col-md-offset-2">
<img src="images/places-img3.jpg" class="center-block">
</div>
<div class="col-md-10 col-md-offset-2">
<img src="images/places-img6.jpg" class="center-block">
</div>
<!-- End Places Images -->
</div>
</div>
CSS：
かなり標準的。ここではあまり起こりません。
#places-container {
font-size: 24px;
font-weight: bold;
}
#places-container img {
width: 100%;
padding-bottom: 25px;
}
jQueryの：ここ
var fixmeTop = $('#fixed1').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('#fixed1').css({
position: 'fixed',
top: '0',
left: '0'
});
} else {
$('#fixed1').css({
position: 'static',
});
}
});
は、私はより良い自分の問題を説明するために作られた2つの例のイメージです。私はそれが私を逃すことは非常に簡単なものだと確信しています、そして、これは私の問題をはるかに明確にするのを助けることができることを願っています。
（明らかな誤字笑）
偉大な、私はそのショットを与える、洞察力を感謝します。そして、私は間違いなくすべてが反応していることを確認します。再度、感謝します。 –