搜索
SR數位設計 ECSHOP RWD響應式技術開發 JS程式語法 JQUERY 頁框隨卷軸浮動效果 (FIXED)
byadmin 發表於 2013-4-27 19:39:41 , 7361人已閱讀 , 0人回應
早期設計網站 , 可能大家容易將焦點放在美觀與可視性 , 但隨著人機介面的概念導入 , 一個好的網站設計 , 一定是要具備高度的易用性以及直覺性 , 讓使用者不容易在網站中迷失 .

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

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

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


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

  1. <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是停止浮動的標記區塊)

  1. <script type="text/javascript">
  2. var jq = jQuery.noConflict();
  3. jq(function() {
  4.     var top = jq('#nv').offset().top - parseFloat(jq('#nv').css('marginTop').replace(/auto/, 0));
  5.     var footTop = jq('#footer').offset().top - parseFloat(jq('#footer').css('marginTop').replace(/auto/, 0));

  6.     var maxY = footTop - jq('#nv').outerHeight();

  7.     jq(window).scroll(function(evt) {
  8.         var y = jq(this).scrollTop();
  9.         if (y > top) {
  10.             if (y < maxY) {
  11.                 jq('#nv').addClass('fixed').removeAttr('style');
  12.             } else {
  13.                 jq('#nv').removeClass('fixed').css({
  14.                     position: 'absolute',
  15.                     top: (maxY - top) + 'px'
  16.                 });
  17.             }
  18.         } else {
  19.             jq('#nv').removeClass('fixed');
  20.         }
  21.     });
  22. });
  23. </script>
複製代碼
範例下載: JQ漂浮特效.html (2.21 KB, 下載次數: 137)

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.188453 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2017-6-29 11:39

回頂部