導航選單固定頭部跟隨螢幕滾動jQuery外掛程式

(function($);			

$.extend(settings, configsettings);
//initial
if($.browser.msie&&$.browser.version==6.0));
}var obj = this;
var initpos = $(obj).offset().top;
var initposleft = $(obj).offset().left;
var anchoredpos = settings.distance;
if(settings.type=="while")
if($(obj).offset().top<=initpos)
});}else
if($(obj).offset().top<=initpos)
}else
if($(obj).offset().top>=initpos)
}});}}
if(settings.type=="always")
$("body").scroll(function(event) else
});$(obj).css("position","absolute");
$(obj).css(settings.direction,settings.distance+"px");
if(settings.tag!=null));
}else);
}}else
}}else
$(window).scroll(function(event) else
});var objleft = $(obj).offset().left;
$(obj).css("position","fixed");
$(obj).css(settings.direction,settings.distance+"px");
if(settings.tag!=null));
}else);
}}else}}
}}	});		
})(jquery);

本演示中，導航和右下的「返回頂部」使用了 posfixed 外掛程式，請注意檢視效果。

$(document).ready(function());             

});

型別說明

預設值direction

字串方向，相對於頂部（top）或底部（bottom）固定

toptype

字串固定的方式，可選 while 或 always，while 為滾動條滾動到 distance 的數值時固定；always 為一直固定

while

hide

布林值是否自動隱藏固定的物件

false

distance

整數離頂部或底部的數值

0tag

物件導航到乙個元素

null

posfixed 相容以下瀏覽器：

四級選單 顯示頭部層級導航

1.層級的顯示 情況 也是 開發工作中經常用到的 比如 我們現在在c介面 頭部層級顯示 a b c 我們在b頁面的時候顯示 a b 從c介面可以跳到 b也可以跳到 a介面 但是可能有這個問題 就是 我們從b跳轉到c的頁面中 通過介面 獲取到了 c的欄目名稱 和c的id 也獲取到了 他的父親欄目名稱和...

導航，頭部，CSS基礎

1.製作自己的導航條 2.html頭部元素 b.定義了html文件的樣式檔案 c.定義了乙個文件和外部資源之間的關係 3.練習樣式表 a.行內樣式表 b.內嵌樣式表 c.外部樣式表 4.分別練習定義三類選擇器 a.html 選擇器 b.class 類選擇器 c.id 選擇器 en height 20...

導航，頭部，CSS基礎

製作自己的導航條。定義了html文件的樣式檔案 定義了乙個文件和外部資源之間的關係 練習樣式表 行內樣式表 內嵌樣式表 外部樣式表 分別練習定義三類選擇器 html 選擇器 class 類選擇器 id 選擇器 en footer1 logo.png test name search submit 搜...