无法指定css position=fixed

Question

我有三个垂直的div，即右侧边栏，内容，左边栏。当用户滚动页面时，我希望将右侧栏固定在顶部。就像这张照片

​

​

但是目前当我向下滚动我的页面时，第二个侧边栏与第一个侧边栏重叠，如这张照片。中所示，原因是什么？任何人都请帮帮我。-thanks

​

​

 <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

您正在使用引导程序，所以我认为使用它的词缀特性是很明显的。

jsFiddle链接

只需将.col-sm-3的所有内容包装在另一个div中，并添加属性data-spy、data-offset-top和data-offset-bottom，根据它们，引导将完成所有工作。

否则，可以使用javascript代码：

$('.sidebar').affix({offset:{
                        top:60,
                        bottom:200
                     });

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="sidebar" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
                <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>
        <div class="col-md-9">
            <div class="col-md-9">
                <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">
                <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>

Answer 2

当您将侧边栏固定位置时，将其从文档流中取出。

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

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

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

Answer 3

你可以试试stickyMojo插件。