久久天天躁狠狠躁夜夜免费观看,精品国产粉嫩内射白浆内射双马尾,久久国产欧美日韩精品,久久久久久性高,激情欧美成人久久综合

Bootstrap Affix 插件高級(jí)用法詳細(xì)講解

JSON 2016-11-03 16:40:52 6347

Bootstrap 附加導(dǎo)航（Affix）插件

附加導(dǎo)航（Affix）插件允許某個(gè) <div> 固定在頁(yè)面的某個(gè)位置。您也可以在打開或關(guān)閉使用該插件之間進(jìn)行切換。一個(gè)常見的例子是社交圖標(biāo)。它們將在某個(gè)位置開始，但當(dāng)頁(yè)面點(diǎn)擊某個(gè)標(biāo)記，該 <div> 會(huì)鎖定在某個(gè)位置，不會(huì)隨著頁(yè)面其他部分一起滾動(dòng)。

Demo：http://suancuo.cn/json/

這個(gè)Demo鏈接你上下滑動(dòng)的時(shí)候。注意一個(gè)細(xì)節(jié)，到了最下面碰到footer的時(shí)候，自動(dòng)又往上頂，這個(gè)是需要用 function 來解決。先把代碼貼一下：

HTML代碼

<div class="bc-sidebar affix-top" id="myAffix">
	<ul class="nav nav-list nav-tabs nav-stacked bs-docs-sidenav dropdown" style="width: 255px;">
	  <li class="active"><a href="http://suancuo.cn/json/" title="JSON 教程">JSON 教程</a></li>
	  <li class=""><a href="http://suancuo.cn/json/json_intro.html" title="JSON 簡(jiǎn)介">JSON 簡(jiǎn)介</a></li>
	  <li class=""><a href="http://suancuo.cn/json/json_syntax.html" title="JSON 語(yǔ)法">JSON 語(yǔ)法</a></li>
	  <li class=""><a href="http://suancuo.cn/json/json_eval.html" title="JSON 使用">JSON 使用</a></li>
	  <li class=""><a href="http://suancuo.cn/in.html" title="10分鐘掌握J(rèn)SON">10分鐘掌握J(rèn)SON</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/25.html" title="JSON.stringify 函數(shù)">JSON.stringify 函數(shù)</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/100.html" title="Java中json-lib操作">Java中json-lib操作</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/20.html" title="Java中json-lib操作">Json-lib jar包下載</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/46.html" title="Http JSON代替Webservice">Http JSON代替Webservice</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/1.html" title="JSON 和XML比較">JSON 和XML比較</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/121.html" title="JSONP 的工作原理，JSONP Demo講解">JSONP Demo講解</a></li>
	</ul>
</div>

注意div 上要增加class="affix-top" ，并且最好定義一個(gè)id 。

Javascript 代碼

$('#myAffix').affix({
	  offset: {
		top: 202,
		bottom: function () {
		  //不超過footer 高度 + 165px 的位置
		  return (this.bottom =  $('.footer').height() +165 );
		}
	  }
});

top：是頁(yè)面頂部到菜單的高度，其實(shí)也就是滾動(dòng)條滾動(dòng)到這個(gè)位置的時(shí)候，開始跟著頂部走。

bottom：同理是滾動(dòng)到一定程度，距離頁(yè)面最底部需要空余多少空間出來。（px）

下面來一張圖說明。

然后就可以了，這是高級(jí)用法，但是我發(fā)現(xiàn)了一個(gè)BUG，還是只有我這里有問題？

到底部后條件bottom 滿足后，元素（div）添加了一個(gè)屬性position: relative; 和動(dòng)態(tài)的 top 值，來固定高度。但是再往上滑動(dòng)滾動(dòng)條的時(shí)候，這個(gè)屬性沒有刪除position: relative;導(dǎo)致再一次滾動(dòng)失效了，因?yàn)楣潭ㄗ∵@個(gè)元素（div）了。這個(gè)時(shí)候我把代碼改成這樣了。下面看看。

$('#myAffix').affix({
	  offset: {
		top: function () {
		   //當(dāng)往上滾動(dòng)的時(shí)候，判斷一下有沒有這個(gè)屬性，如果有就刪除style。
		   if($('#myAffix').v('style') == 'position: relative;'){
			   $('#myAffix').removeAttr('style');
		   }
		   return 202;
		},
		bottom: function () {
		  //不超過footer 高度 + 165px 的位置
		  return (this.bottom = $('.footer').height() +165 );
		}
	  }
});

解決了這個(gè)Bug 。如果有更好的辦法告知我。

Data配置方式

<div class="bc-sidebar affix-top" data-spy="affix" data-offset-top="200" data-offset-bottom="256">
	<ul class="nav nav-list nav-tabs nav-stacked bs-docs-sidenav dropdown" style="width: 255px;">
	  <li class="active"><a href="http://suancuo.cn/json/" title="JSON 教程">JSON 教程</a></li>
	  <li class=""><a href="http://suancuo.cn/json/json_intro.html" title="JSON 簡(jiǎn)介">JSON 簡(jiǎn)介</a></li>
	  <li class=""><a href="http://suancuo.cn/json/json_syntax.html" title="JSON 語(yǔ)法">JSON 語(yǔ)法</a></li>
	  <li class=""><a href="http://suancuo.cn/json/json_eval.html" title="JSON 使用">JSON 使用</a></li>
	  <li class=""><a href="http://suancuo.cn/in.html" title="10分鐘掌握J(rèn)SON">10分鐘掌握J(rèn)SON</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/25.html" title="JSON.stringify 函數(shù)">JSON.stringify 函數(shù)</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/100.html" title="Java中json-lib操作">Java中json-lib操作</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/20.html" title="Java中json-lib操作">Json-lib jar包下載</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/46.html" title="Http JSON代替Webservice">Http JSON代替Webservice</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/1.html" title="JSON 和XML比較">JSON 和XML比較</a></li>
	  <li class=""><a href="http://suancuo.cn/blog/121.html" title="JSONP 的工作原理，JSONP Demo講解">JSONP Demo講解</a></li>
	</ul>
</div>

這樣的方式就是不能計(jì)算，值是死的。

data-spy="affix" data-offset-top="200" data-offset-bottom="256"

實(shí)現(xiàn)Affix

在上面兩種使用附加導(dǎo)航（Affix）插件的方式中，您都必須通過 CSS 定位內(nèi)容。附加導(dǎo)航（Affix）插件在三種 class 之間切換，每種 class 都呈現(xiàn)了特定的狀態(tài)： .affix 、.affix-top 和 .affix-bottom 。請(qǐng)按照下面的步驟，來為這三種狀態(tài)設(shè)置您自己的 CSS（不依賴此插件）。

在開始時(shí)，插件添加 .affix-top 來指示元素在它的最頂端位置。這個(gè)時(shí)候不需要任何的 CSS 定位。
當(dāng)滾動(dòng)經(jīng)過添加了附加導(dǎo)航（Affix）的元素時(shí)，應(yīng)觸發(fā)實(shí)際的附加導(dǎo)航（Affix）。此時(shí) .affix 會(huì)替代 .affix-top ，同時(shí)設(shè)置position: fixed; （由 Bootstrap 的 CSS 代碼提供）。
如果定義了底部偏移，當(dāng)滾動(dòng)到達(dá)該位置時(shí)，應(yīng)把 .affix 替換為.affix-bottom 。由于偏移是可選的，假如設(shè)置了該偏移，則要求同時(shí)設(shè)置適當(dāng)?shù)?nbsp;CSS。在這種情況下，請(qǐng)?jiān)诒匾臅r(shí)候添加position: absolute; 。

屬性名稱

類型/默認(rèn)值

Data屬性名稱

詳細(xì)描述

offset

number | function | object

默認(rèn)值：10

data-offset

當(dāng)瀏覽器動(dòng)位置時(shí)，距離頂部的偏移像素。如果設(shè)置了一個(gè)數(shù)字，則該偏移量的值將被應(yīng)用在頂部和底部。如果設(shè)置了一個(gè)對(duì)象偏移，則其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要?jiǎng)討B(tài)計(jì)算偏移，請(qǐng)使用函數(shù)。

本站就是采用Bootstarp建設(shè)。