当我们在bootstrap设计中将底部移动到页面时,我如何向下滚动左侧菜单

时间:2015-05-20 10:08:50

标签: html css twitter-bootstrap

先生,请帮我找一个自举设计的解决方案。我想要当我们向下滚动页面然后左侧类别菜单也向下滚动,当我们移动到页面的上方然后它移到上面。这是我的代码

<div class="panel-group category-products" id="accordian"><!--category-productsr-->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" class="accordion-toggle" data-parent="#accordian" href="#hair">
                                        <span class="glyphicon glyphicon-chevron-down pull-right"></span>
                                        Hindustan Unilever
                                    </a>
                                </h4>
                            </div>
                            <div id="hair" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <ul>
                                        <li><a href="http://localhost/capital_product/productcat/food-brands">Food brands</a></li>
                                        <li><a href="#">Homecare Brands</a></li>
                                        <li><a href="#">Personal Care Brands</a></li>
                                        <li><a href="#">Water Purifier Brand</a></li>

                                    </ul>
                                </div>
                            </div>
                        </div>

这是左侧边栏的css

.category-products { border: 1px solid #F7F7F0;margin-bottom: 35px;margin-bottom: 35px; padding-bottom: 20px; padding-top: 15px;}.left-sidebar h2, .brands_products h2 {color: #4086c9;font-family: 'Roboto', sans-serif;font-size: 18px; font-weight: 700; margin: 0 auto 30px;text-align: center; text-transform: uppercase; position: relative;  z-index:3;}.left-sidebar h2:after, h2.title:after{content: " ";position: absolute;border: 1px solid #f5f5f5;bottom:8px;left: 0;width: 100%;height: 0;z-index: -2;}.left-sidebar h2:before{content: " ";position: absolute;background: #fff; bottom: -6px;width: 130px;height: 30px;z-index: -1;left: 50%;margin-left: -65px;}h2.title:before{content: " ";position: absolute;background: #fff;bottom: -6px;width: 220px;height: 30px;z-index: -1;left: 50%;margin-left: -110px;}

0 个答案:

没有答案