最新的Web開發教程
 

Bootstrap JS詞綴

❮上一頁 下一頁參考❯

JS詞綴(affix.js)

詞綴插件允許元素成為貼（鎖定）到頁面上的一個區域。 這通常是與導航菜單或社會圖標按鈕使用的，以使它們“粘”在一特定區域，而上下滾動的網頁。

該插件打開和關閉這種行為（從靜態到固定的改變CSS位置的值），這取決於滾動位置。

這一詞綴三個類之間切換插件： .affix ， .affix-top和.affix-bottom 。 每一類代表一個特定的狀態。 您必須添加CSS屬性來處理的實際位置，與例外position:fixed的.affix類。

欲了解更多信息，請閱讀我們的Bootstrap詞綴教程 。

提示：詞綴插件經常與一起使用Scrollspy插件。

通過data-*屬性

添加data-spy="affix"到你想窺探元素和data-offset-top|bottom=" number "屬性來計算滾動的位置。

例

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
試一試»

通過JavaScript

與手動啟用：

例

$('.nav').affix({offset: {top: 150} });
試一試»

貼上選項

選項可以通過數據屬性或JavaScript進行傳遞。 對於數據屬性，選項名稱追加到數據 - ，如在數據偏移=“”。

名稱 類型 默認 描述
offsetnumber | object | function10 指定計算滾動的位置時，從屏幕偏移的像素的數量。 當使用單個號碼，該偏移被加到頂部和底部的方向。 如果你只是想控制的頂部或底部，使用對象，像offset: {top:25}

對於多個偏移，使用offset: {top:25, bottom:50}

提示：使用函數來提供動態偏移（可以是響應設計非常有用）
targetselector | node | elementthe window object 指定詞綴的目標元素

詞綴活動

下表列出了所有可用的詞綴事件。

事件 描述 嘗試一下
affix.bs.affix 前固定定位被添加到元件發生時（例如，當.affix-top類是關於與被替換.affix類） 嘗試一下
affixed.bs.affix 後固定定位被添加到元件發生時（例如，後.affix-top類被替換為.affix類） 嘗試一下
affix-top.bs.affix 發生頂部元件返回到它的原始（非固定的）位置之前（例如， .affix類即將被替換.affix-top ） 嘗試一下
affixed-top.bs.affix 發生頂部元件返回到它的原始（非固定的）位置之後（例如， .affix類已被替換.affix-top ） 嘗試一下
affix-bottom.bs.affix 底部元件返回到它的原始（非固定的）位置之前發生（例如， .affix類即將被替換.affix-bottom ） 嘗試一下
affixed-bottom.bs.affix 底部元件返回到它的原始（非固定的）位置（例如，後發生.affix類已被替換.affix-bottom ） 嘗試一下
例子

例子

導航欄貼

創建水平貼導航菜單：

例

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
試一試»

使用jQuery自動貼上導航欄

使用jQuery的outerHeight()方法來貼上導航欄用戶滾動後，通過指定的元素(<header>)

例

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });
試一試»

Scrollspy和詞綴

使用與綴在一起插件Scrollspy插件：

水平菜單（導航欄）

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>
試一試»

垂直菜單（Sidenav）

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>
試一試»

詞綴上導航欄動畫

使用CSS來操作不同.affix類：

示例 - 更改背景顏色以及滾動導航欄的填充

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background-color: #F44336;
    border-color: #F44336;
}

.affix a {
    color: #fff !important;
    padding: 15px !important;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top a {
    padding: 25px !important;
}
試一試»

示例 - 在滑動導航欄

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top {
    position: static;
    top: -35px;
}
試一試»

❮上一頁 下一頁參考❯