溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一．附加導航
附加導航即粘貼在屏幕某處實現錨點功能。
//基本實例。
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="jumbotron" >
<h2>Bootstrap Affix</h2>
</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">
<h3 id="section-1">第一部分</h3>
<p>...</p>
<h3 id="section-2">第二部分</h3>
<p>...</p>
<h3 id="section-3">第三部分</h3>
<p>...</p>
<h3 id="section-4">第四部分</h3>
<p>...</p>
<h3 id="section-5">第四部分</h3>
<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
定位的。
//設置成 bottom
ul.nav-tabs.affix-bottom{ bottom : 30px;
}
//設置成 bottom
$('#myAffix').affix({ offset: {
bottom: 150
}
})
Affix 包含幾個事件，如下：
//其他雷同
$('#myAffix').on('affixed-top.bs.affix', function () {
alert('觸發！');
});免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
