JQUERY 頁框隨卷軸浮動效果 (FIXED)

byadmin 發表於 2013-4-27 19:39:41 , 12391人已閱讀 , 0人回應

早期設計網站 , 可能大家容易將焦點放在美觀與可視性 , 但隨著人機介面的概念導入 , 一個好的網站設計 , 一定是要具備高度的易用性以及直覺性 , 讓使用者不容易在網站中迷失 .

現在越來越多網站都開始將 "導航按鈕" 做成具有浮動效果 , 幫助使用者在捲動長頁面時 , 不用回到頭部 , 可以直接快速選取其他頁面 (以前是製作一個快速返回頭部的箭頭按鈕) , 實際上使用時真的也發現 , 這種效果的確可以大大增加網站的易用性 , 並且可以在更短的時間閱讀更多的內容。

其實浮動按鈕這個特性 , 在CSS中也不是個新東西 , 以往最常被用到的用途是應用在網站廣告上 , 強迫使用者去閱讀廣告 ! 但是CSS達到效果沒辦法指定讓浮動從什麼地方開始以及到達某個DIV板塊的時候停止浮動 , 現在這些效果都可以藉由JQ 快速來實現 .

《先來看一下效果圖》
jq效果.jpg

實現方法
1. 先載入JQ的核心庫 (下面是直接從google api引入 jq的核心庫)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

複製代碼

2. 寫入指定浮動的DIV ID or Class
(下面程式碼的#nv是浮動區塊、#footer是停止浮動的標記區塊)

<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function() {
var top = jq('#nv').offset().top - parseFloat(jq('#nv').css('marginTop').replace(/auto/, 0));
var footTop = jq('#footer').offset().top - parseFloat(jq('#footer').css('marginTop').replace(/auto/, 0));
var maxY = footTop - jq('#nv').outerHeight();
jq(window).scroll(function(evt) {
var y = jq(this).scrollTop();
if (y > top) {
if (y < maxY) {
jq('#nv').addClass('fixed').removeAttr('style');
} else {
jq('#nv').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
jq('#nv').removeClass('fixed');
}
});
});
</script>