CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
maison.m
maison.m

Reputation: 863

Bootstrap 3 columns shifting over horizontially after fixed positioning is applied

I am having an issue with two of my Bootstrap columns shifting to the left when a 'position: fixed' property is applied to my far left sidebar column. The fixed position property is only applied once this column hits the top of the window, otherwise this column is static. I am doing this with JQuery. Prior to the JQuery code firing and applying the fixed position property, everything is aligned properly. I am thinking that once the fixed position is added to my far left sidebar column, there is a "void" and the two columns in question shift left to fill it.

Here is my code below with further detail. I do apologize if my explanation is unclear!

HTML:

#fixed1is the far left sidebar column that is being fixed once the page scrolls to the top of the browser window. I commented "Shifting Column 1" & Shifting Column 2" next to the two columns that are shifting left after #fixed1 is changed to a 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 much 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 are two example images I have made to better illustrate my issue. I am sure it is something very simple eluding me, and I hope this can help make my problem that much more clear.

enter image description here

enter image description here

(obvious typos lol)

Upvotes: 2

Views: 228

Answers (2)

Bradley PodX12 Clenton
Bradley PodX12 Clenton

Reputation: 11

The issue is when you are making that column fixed it is now move realtive to its nearest positioned parent.

An option to fix would be to apply a col-md-offset-2 to the shifting column 1 at the same time you make the other element fixed.

Upvotes: 1

OregonTrail
OregonTrail

Reputation: 9039

Use jQuery to also add a div with col-md-2 when you set position: fixed on your leftmost column, and remove it past the scroll. You are breaking your leftmost column out of the relative context that determines the position of the bootstrap grid system. Also test how this looks on mobile!

Upvotes: 1

Related Questions