使用引导列固定位置答案

【问题标题】：Position fixed with bootstrap columns使用引导列固定位置
【发布时间】：2015-12-27 12:55:00
【问题描述】：

我有一个 sibdebar，当用户向下滚动并到达它时，我希望它始终出现在屏幕顶部，因此我使用此线程寻求帮助： Make element fixed on scroll

问题是，当我向下滚动时，宽度出现问题。首先没问题：

但是当我向下滚动时：

代码：

<div class="row">
            <div class="col-sm-3" id="dynamic-sidebar">
                    <?php dynamic_sidebar('single_post_sidebar');?>
                <script>
                    jQuery(document).ready(function($){
                        var elementPosition = $('#dynamic-sidebar').offset();           
                        $(window).scroll(function(){
                            if($(window).scrollTop() > elementPosition.top){
                                $('#dynamic-sidebar').css('position','fixed').css('top','0');
                            } else {
                                $('#dynamic-sidebar').css('position','static');

                            }    
                        });
                    }); 
                </script>
            </div>
            <div class="col-sm-9 single-post-content">
                <?php the_content(); ?>
           </div>
 </div>

任何帮助将不胜感激。

【问题讨论】：

是 col-3 和 col-9 的设计吗？
是的，但那是在 col-sm-9 父级内部..
在 col-9 父级内部用 col-9 col-3 制作两个 div 并将固定的 div 放入 col-3 并让其他东西相同或始终固定此 col-3。
没有真正理解你.. 如果我将这个 col-sm-3 固定，无论滚动它都会到达屏幕顶部

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

查看下面的示例，我刚刚在 col-9 内的 col-3 中添加了样式“right:0”和“position:fixed”。

 <div class="row" style="margin-top:200px">
    <div class="col-md-3">
        <ul class="list-group">
            <li class="list-group-item">First item</li>
            <li class="list-group-item">Second item</li>
            <li class="list-group-item">Third item</li>
        </ul>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-9">
                <!--Put here your long paragraph-->
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                <br/><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
            </div>
            <div class="col-md-2 pull-right" style="position:fixed; right: 0">
                <ul class="list-group ">
                    <li class="list-group-item">First item</li>
                    <li class="list-group-item">Second item</li>
                    <li class="list-group-item">Third item</li>
                    <li class="list-group-item">First item</li>                      
                </ul>
            </div>
        </div>

    </div>
</div>

【讨论】：

我做到了，现在向下滚动时看起来像这样：i.imgur.com/qvscFTQ.jpg... 仍然没有解决这个问题。
附上图片链接似乎一切正常，现在有什么问题？
它只是将侧边栏向右移动，与 .contianer 限制重叠，如下所示：i.imgur.com/nvLA2Km.jpg?1