Question

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

但是目前我向下滚动页面时，第二个侧边栏与第一个侧边栏重叠，如this image.所示是什么原因？有人请帮助我。 -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

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

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

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

一个解决方案是动态（使用jQuery）在侧边栏修复时向内容div添加左边距。

Answer 2

您可以尝试stickyMojo插件。

Answer 3

您正在使用引导程序，因此我认为使用其affix功能显而易见。

Link for jsFiddle

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

否则你可以使用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>

无法指定css position = fixed

3 个答案: