bootstrap 滚动监听实例

时间:2016-01-30 09:48:19 阅读:3590次
bootstrap 滚动监听实例

需引入: bootstrap.min.css 和 bootstrap.min.js


<div class="container">

<div class="block block_mt50" >

<div class="col-md-3 col-sm-3 col-xs-12" id="myScrollspy">

<ul>

<li class="active" >

    <a href="#section0">section0</a>

</li>

                                <li>

    <a href="#section1">section1</a>

</li>

</ul>

</div>

<div data-spy="scroll" class="myScrollspy col-md-9 col-sm-9 col-xs-12" data-target="#myScrollspy" data-offset="0">

                        <div id="section0">

<h2>section0</h2>

<div>

section0__content

</div>

</div>

                        <div id="section1">

<h2>section1</h2>

<div>

section1__content

</div>

</div>

</div>

</div>

</div>



css:

#myScrollspy{

border:1px solid #eee;

li{

line-height:35px;

padding:10px 20px;

&.active{

background:#337ab7;

@include border-radius(4px);

a{

color:#fff !important;

}

}

}

}


.myScrollspy{

position: relative;

height:500px;

padding:0 20px;

overflow-x: hidden;

overflow-y: auto;

&::-webkit-scrollbar { width: 0px; height: 0px;}

&::scrollbar { width: 0px; height: 0px;}

&::moz-scrollbar { width: 0px; height: 0px;}


h2{

height:50px;

line-height:50px;

font-size:18px;

color:#333;

}

}



扫描二维码关注程序员爱笔记,接收更多资讯

评论

快速评论