溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)Bootstrap中自動(dòng)定位浮標(biāo)的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。
Affix 插件主要功能就是通過插件給某個(gè)元素（需要固定的元素）添加或刪除position:fixed，實(shí)現(xiàn)元素在瀏覽器窗口的粘性固定效果。
首先，來看一個(gè)蘋果官網(wǎng)對自動(dòng)定位浮標(biāo)的應(yīng)用
從上面的git圖中可知，Macbook一欄滾動(dòng)到一定高度時(shí)，固定在窗口頂部便不再移動(dòng)
Affix 插件可以對任何元素進(jìn)行固定定位，其中比較簡單的方法，就是通過自定義屬性data來觸發(fā)。其主要包括兩個(gè)參數(shù)：
1、data-spy：取值 affix，表示元素是固定不變的。
2、data-offset：整數(shù)值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top和data-offset-bottom
data-offset-top用來設(shè)置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當(dāng)用戶從頂部向下拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)的距離大于 90px 時(shí)，affix 元素不再滾動(dòng)，就會(huì)固定在瀏覽器窗口頂部
data-offset-bottom剛好與 data-offset-top 相反
<div data-spy="affix" data-offset="90">affix元素</div> <!-- 等價(jià) --> <div data-spy="affix" data-offset-top="90" data-offset-bottom="90">affix元素</div>
【設(shè)置CSS】
在使用Affix插件時(shí)，必須通過 CSS 定位內(nèi)容。Affix插件在三種 class 之間切換，每種 class 都呈現(xiàn)了特定的狀態(tài)：.affix、.affix-top 和 .affix-bottom
1、在開始時(shí)，插件添加.affix-top來指示元素在它的最頂端位置。這個(gè)時(shí)候不需要任何的 CSS 定位
2、當(dāng)滾動(dòng)經(jīng)過添加了Affix的元素時(shí)，應(yīng)觸發(fā)實(shí)際的Affix。此時(shí).affix會(huì)替代.affix-top，同時(shí)設(shè)置position: fixed（由 Bootstrap 的 CSS 代碼提供）
這時(shí)，需要手動(dòng)設(shè)置.affix，如.affix{top:0;}表示停止在窗口頂部
3、如果定義了底部偏移，當(dāng)滾動(dòng)到達(dá)該位置時(shí)，應(yīng)把.affix替換為.affix-bottom。由于偏移是可選的，假如設(shè)置了該偏移，則要求同時(shí)設(shè)置適當(dāng)?shù)?CSS。在這種情況下，請?jiān)诒匾臅r(shí)候添加position: absolute;
<style>
.test{width: 100%;height: 50px;background-color:lightgreen;}
.affix{top:0px;}
</style>
</head>
<body style="height:1000px;" >
<div style="height:100px"></div>
<div data-spy="affix" data-offset="100" class="test"></div>
</body>
有時(shí)候，使用該插件，其頂部和底部的高度不一定是固定的，所以在初始化時(shí)使用聲明式用法不太合適。這時(shí)，使用javascript用法就顯得比較靈活了，因?yàn)樗粌H支持傳入數(shù)字型的offset，還支持傳入能夠動(dòng)態(tài)計(jì)算offset的function函數(shù)
<script>
$('#myAffix').affix({
offset: {
top:100,
bottom: function () {
return (this.bottom = $('footer').outerHeight(true))
}
}
})
</script>【事件】
affix組件提供了6種事件，即affix和affixed各對應(yīng)于3種狀態(tài)(普通、top、bottom)時(shí)的事件
affix.bs.affix 在定位結(jié)束之前立即觸發(fā) affixed.bs.affix 在定位結(jié)束之后立即觸發(fā) affix-top.bs.affix 在定位元素應(yīng)用affixed-top效果之前立即觸發(fā) affixed-top.bs.affix 在定位元素應(yīng)用affixed-top效果之后立即觸發(fā) affix-bottom.bs.affix 在定位元素應(yīng)用affixed-bottom效果之前立即觸發(fā) affixed-bottom.bs.affix 在定位元素應(yīng)用affixed-bottom效果之后立即觸發(fā)
<style>
.test{width: 100%;height: 50px;background-color:lightgreen;}
header{height: 100px;}
.affix{top:0px;}
</style>
</head>
<body style="height:1000px;">
<header></header>
<div data-spy="affix" class="test"></div>
<script>
$(function(){
$('.test').affix({
offset:{
top:function(){
return (this.top = $('header').outerHeight(true))
}
}
}).on('affix.bs.affix',function(){
$(this).html('我被固定在窗口頂部');
}).on('affix-top.bs.affix',function(){
$(this).html('我正跟隨滾動(dòng)條滾動(dòng)');
})
})
</script>
感謝各位的閱讀！關(guān)于“Bootstrap中自動(dòng)定位浮標(biāo)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼