欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Bootstrap中自動(dòng)定位浮標(biāo)的示例分析

這篇文章給大家分享的是有關(guān)Bootstrap中自動(dòng)定位浮標(biāo)的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括公安網(wǎng)站建設(shè)、公安網(wǎng)站制作、公安網(wǎng)頁(yè)制作以及公安網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，公安網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到公安省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而B(niǎo)ootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類(lèi)型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。

Affix 插件主要功能就是通過(guò)插件給某個(gè)元素（需要固定的元素）添加或刪除position:fixed，實(shí)現(xiàn)元素在瀏覽器窗口的粘性固定效果。

基本用法

首先，來(lái)看一個(gè)蘋(píng)果官網(wǎng)對(duì)自動(dòng)定位浮標(biāo)的應(yīng)用

Bootstrap中自動(dòng)定位浮標(biāo)的示例分析

從上面的git圖中可知，Macbook一欄滾動(dòng)到一定高度時(shí)，固定在窗口頂部便不再移動(dòng)

Affix 插件可以對(duì)任何元素進(jìn)行固定定位，其中比較簡(jiǎn)單的方法，就是通過(guò)自定義屬性data來(lái)觸發(fā)。其主要包括兩個(gè)參數(shù)：

1、data-spy：取值 affix，表示元素是固定不變的。

2、data-offset：整數(shù)值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top和data-offset-bottom

data-offset-top用來(lái)設(shè)置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當(dāng)用戶(hù)從頂部向下拖動(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í)，必須通過(guò) CSS 定位內(nèi)容。Affix插件在三種 class 之間切換，每種 class 都呈現(xiàn)了特定的狀態(tài)：.affix、.affix-top 和 .affix-bottom

1、在開(kāi)始時(shí)，插件添加.affix-top來(lái)指示元素在它的最頂端位置。這個(gè)時(shí)候不需要任何的 CSS 定位　

2、當(dāng)滾動(dòng)經(jīng)過(guò)添加了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。在這種情況下，請(qǐng)?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>

Bootstrap中自動(dòng)定位浮標(biāo)的示例分析

JS觸發(fā)

有時(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各對(duì)應(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>

Bootstrap中自動(dòng)定位浮標(biāo)的示例分析

感謝各位的閱讀！關(guān)于“Bootstrap中自動(dòng)定位浮標(biāo)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)名稱(chēng)：Bootstrap中自動(dòng)定位浮標(biāo)的示例分析
轉(zhuǎn)載注明：http://www.chinadenli.net/article30/gooopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司