Bootstrap 附加導(dǎo)航插件
標(biāo)簽：
JavaScript
一．附加导航附加导航即粘贴在屏幕某处实现锚点功能。//基本实例。<body data-spy="scroll" data-target="#myScrollspy"><div class="container"><div class="jumbotron" style="height:150px"><h1>Bootstrap Affix</h1></div><div class="row"><div class="col-xs-3" id="myScrollspy"><ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="150"><li class="active"><a href="#section-1">第一部分</a></li><li><a href="#section-2">第二部分</a></li><li><a href="#section-3">第三部分</a></li><li><a href="#section-4">第四部分</a></li><li><a href="#section-4">第五部分</a></li></ul></div><div class="col-xs-9"><h2 id="section-1">第一部分</h2><p>...</p><h2 id="section-2">第二部分</h2><p>...</p><h2 id="section-3">第三部分</h2><p>...</p><h2 id="section-4">第四部分</h2><p>...</p><h2 id="section-5">第四部分</h2><p>...</p></div></div></div>//导航的 CSS 部分ul.nav-pills { width: 200px;}ul.nav-pills.affix{ top: 30px;}//JavaScript 代替 data-spy="affix" data-offset-top="125"$('#myAffix').affix({ offset: {top: 150}})我们默认使用的是 top，当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。//设置成 bottomul.nav-tabs.affix-bottom{ bottom : 30px;}//设置成 bottom$('#myAffix').affix({ offset: {bottom: 150}})Affix 包含几个事件，如下：//其他雷同$('#myAffix').on('affixed-top.bs.affix', function () {alert('触发！');});
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦