jquery - 无法指定 css position=fixed

Question

我有 3 个垂直 div，即右侧边栏、内容、左侧边栏。 当用户滚动页面时，我想将右侧边栏固定在顶部。 Like this image

但目前，当我向下滚动页面时，第二个侧边栏会与第一个侧边栏重叠，如 this image. 所示。 是什么原因？任何人都请帮助我。 -谢谢

---

 <script type="text/javascript">
        function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $('#navwrap').css({'position': 'fixed','z-index': '1', 'top': '0'}); 
    }
    else {
        $('#navwrap').css({'position': 'static', 'top': 'auto'});
    }
} 
$(document).ready(function () {
       $("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
});
     </script>

HTML代码

<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column" id="navwrap">
            <div class="btn-group">
                 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> Justify</button>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="btn-group">
                         <button class="btn btn-default">Action</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li class="disabled">
                                <a href="#">Another action</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list-group">
                 <a href="#" class="list-group-item active">Home</a>
                <div class="list-group-item">
                    List header
                </div>
                <div class="list-group-item">
                    <h4 class="list-group-item-heading">
                        List group item heading
                    </h4>
                    <p class="list-group-item-text">
                        ...
                    </p>
                </div>
                <div class="list-group-item">
                    <span class="badge">14</span>Help
                </div> <a class="list-group-item"><span class="badge">14</span>Help</a>
            </div>
        </div>
        <div class="col-md-9 column">
            <div class="row clearfix">
                <div class="col-md-9 column">
                    <p>
                        Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                    </p>
                </div>
                <div class="col-md-3 column">
                    <p>
                        Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, osuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

当你固定侧边栏时，你将它从文档流中移除。

也就是说，内容 div 位于侧边栏旁边，当侧边栏被移除时，内容会自然地尽可能地向左移动。

如果您将侧边栏放在屏幕的右侧，内容将保持在相同的位置。

一种解决方案是在侧边栏固定时动态地(使用 jQuery)向内容 div 添加一个左边距。