jquery - Bootstrap 3 columns shifting over horizontially after fixed positioning is applied -
i having issue 2 of bootstrap columns shifting left when 'position: fixed' property applied far left sidebar column. fixed position property applied once column hits top of window, otherwise column static. doing jquery. prior jquery code firing , applying fixed position property, aligned properly. thinking once fixed position added far left sidebar column, there "void" , 2 columns in question shift left fill it.
here code below further detail. apologize if explanation unclear!
html:
#fixed1
is far left sidebar column being fixed once page scrolls top of browser window. commented "shifting column 1" & shifting column 2" next 2 columns shifting left after#fixed1
changed fixed position via jquery.
<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:
pretty standard. not happening here.
#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', }); } });
here 2 example images have made better illustrate issue. sure simple eluding me, , hope can make problem more clear.
(obvious typos lol)
use jquery add div col-md-2 when set position: fixed on leftmost column, , remove past scroll. breaking leftmost column out of relative context determines position of bootstrap grid system. test how looks on mobile!
Comments
Post a Comment