jquery - Bootstrap 3列在应用固定定位后水平移动

Question

当“位置:固定”属性应用于最左侧的侧边栏列时，我的两个 Bootstrap 列向左移动时出现问题。固定位置属性仅在该列到达窗口顶部时应用，否则该列是静态的。我正在用 JQuery 做这件事。在 JQuery 代码触发和应用固定位置属性之前，一切都正确对齐。我在想，一旦将固定位置添加到我最左侧的侧边栏列中，就会出现一个“空白”，并且有问题的两列向左移动以填充它。

下面是我的代码，其中包含更多详细信息。如果我的解释不清楚，我深表歉意!

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.

(明显的错别字哈哈)

Answer 1

当您设置 position: fixed 在最左边的列时，使用 jQuery 还可以添加一个带有 col-md-2 的 div，并通过滚动将其移除。您正在将最左边的列从确定引导网格系统位置的相对上下文中分离出来。还要测试它在移动设备上的外观!