Bootstrap自動定位浮標_ZenDei技術網路在線

Bootstrap自動定位浮標

-Advertisement-

前面的話 Affix 插件主要功能就是通過插件給某個元素（需要固定的元素）添加或刪除position:fixed，實現元素在瀏覽器視窗的粘性固定效果。本文將詳細介紹Bootstrap自動定位浮標基本用法首先，來看一個蘋果官網對自動定位浮標的應用從上面的git圖中可知，Macbook一欄滾動到一 ...

前面的話

　　Affix 插件主要功能就是通過插件給某個元素（需要固定的元素）添加或刪除position:fixed，實現元素在瀏覽器視窗的粘性固定效果。本文將詳細介紹Bootstrap自動定位浮標

基本用法

　　首先，來看一個蘋果官網對自動定位浮標的應用

　　從上面的git圖中可知，Macbook一欄滾動到一定高度時，固定在視窗頂部便不再移動

　　Affix 插件可以對任何元素進行固定定位，其中比較簡單的方法，就是通過自定義屬性 data 來觸發。其主要包括兩個參數：

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

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

　　data-offset-top 用來設置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當用戶從頂部向下拖動滾動條，當滾動的距離大於 90px 時，affix 元素不再滾動，就會固定在瀏覽器視窗頂部

　　data-offset-bottom 剛好與 data-offset-top 相反

<div data-spy="affix" data-offset="90">affix元素</div>
<!-- 等價 -->
<div data-spy="affix" data-offset-top="90" data-offset-bottom="90">affix元素</div>

【設置CSS】

　　在使用Affix插件時，必須通過 CSS 定位內容。Affix插件在三種 class 之間切換，每種 class 都呈現了特定的狀態： .affix、.affix-top 和 .affix-bottom

　　1、在開始時，插件添加 .affix-top 來指示元素在它的最頂端位置。這個時候不需要任何的 CSS 定位　

　　2、當滾動經過添加了Affix的元素時，應觸發實際的Affix。此時 .affix 會替代 .affix-top，同時設置 position: fixed（由 Bootstrap 的 CSS 代碼提供）

　　這時，需要手動設置.affix，如.affix{top:0;}表示停止在視窗頂部

　　3、如果定義了底部偏移，當滾動到達該位置時，應把 .affix 替換為 .affix-bottom。由於偏移是可選的，假如設置了該偏移，則要求同時設置適當的 CSS。在這種情況下，請在必要的時候添加 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>

JS觸發

　　有時候，使用該插件，其頂部和底部的高度不一定是固定的，所以在初始化時使用聲明式用法不太合適。這時，使用javascript用法就顯得比較靈活了，因為它不僅支持傳入數字型的offset，還支持傳入能夠動態計算offset的function函數

<script>
$('#myAffix').affix({
  offset: {
    top:100,
    bottom: function () {
      return (this.bottom = $('footer').outerHeight(true))
    }
  }
})    
</script>

【事件】

　　affix組件提供了6種事件，即affix和affixed各對應於3種狀態(普通、top、bottom)時的事件

affix.bs.affix    在定位結束之前立即觸發
affixed.bs.affix    在定位結束之後立即觸發
affix-top.bs.affix    在定位元素應用affixed-top效果之前立即觸發
affixed-top.bs.affix    在定位元素應用affixed-top效果之後立即觸發
affix-bottom.bs.affix    在定位元素應用affixed-bottom效果之前立即觸發
affixed-bottom.bs.affix    在定位元素應用affixed-bottom效果之後立即觸發

<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('我正跟隨滾動條滾動');
    })
})    
</script>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

擴展運算符，箭頭函數和參數預設值，剩餘參數，拓展參數

擴展運算符 let zzz=[2,4,6]; console.log(zzz);//[2, 4, 6] console.log(...zzz);//2 4 6 let a=[1,2,3]; let b=[...a,4,5,6]; console.log(b);//1,2,3,4,5,6 let [a ...
js學習總結----動畫之在指定時間內實現單方向勻速運動

具體代碼如下 ...
js學習--變數作用域

作為一名菜鳥的我，每天學點的感覺還是不錯的。今天學習閉包的過程中看到作用域與作用域鏈這兩個概念，我覺得作為一名有追求的小白，有必要詳細瞭解下。變數的作用域就js變數而言，有全局變數和局部變數。這裡我覺得這個按字面意思理解就行了.......下麵舉個例子這邊有2個很有意思的地方 1.當變數不用v ...
表達式和語句

if語句三元運算符表達式1 ? 表達式2 : 表達式3是對if……else語句的一種簡化寫法 switch語句 switch (expression) { case 常量1: 語句; break; case 常量2: 語句; break; case 常量3: 語句; break; … case ...
根據相同的class 判斷點擊的是那個tab頁

判斷點擊的是那個tab頁 jsp: js: ...
Css繪製形狀

前言：終於我的大一生活結束了，迎來了愉快的暑假，大家都開始了各自的忙碌。一直忙著一些項目的事情，終於決定今天要更新一篇博客了，對上一階段的學習做簡單的總結。這次我主要總結一下用Css繪製各種形狀的技巧，同時要結合before、after偽元素和定位做出一些效果。 Triangle Up(向上的三角 ...
常用正則表達式

一、校驗數字的表達式 1 數字：^[0-9]*$ 2 n位的數字：^\d{n}$ 3 至少n位的數字：^\d{n,}$ 4 m-n位的數字：^\d{m,n}$ 5 零和非零開頭的數字：^(0|[1-9][0-9]*)$ 6 非零開頭的最多帶兩位小數的數字：^([1-9][0-9]*)+(.[0-9] ...
微信小程式+OLAMI(歐拉蜜)自然語言API介面製作智能查詢工具--快遞、聊天、日曆等

微信小程式最近比較熱門，再加上自然語義理解也越來越被人關註，於是我想趕趕潮流，做一個小程式試試。想來想去快遞查詢應該是一種比較普遍的需求。如果你也在通過自然語言介面做點什麼，希望我的這篇博客能幫到你。我建了一個QQ群656580961，感興趣的朋友可以加入互通有無。或者你也可以直接下載代碼試一試。 ...