簡單的jQuery導航菜單固定插件smint

拉丁傳說 2018-4-13 1235

和?posfixed?類似,smint 也是一個導航菜單固定插件。當頁滾動時,導航菜單會固定在頂部;當點擊菜單時,頁面會平滑的滾動到對應的區域。

兼容性

由于 smint 使用了?position: fixed,所以它不兼容 IE6。

使用方法

引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.smint.js"></script>

HTML

<div class="wrap">
?? ?<div class="subMenu">
?? ??? ?<div class="inner">
?? ??? ??? ?<a href="www.dowebok.com/" class="subNavBtn" id="sTop">首頁</a>
?? ??? ??? ?<a href="www.dowebok.com/code" class="subNavBtn" id="s1">代碼</a>
?? ??? ??? ?<a href="#" class="subNavBtn" id="s2">素材</a>
?? ??? ??? ?<a href="#" class="subNavBtn" id="s3">模板</a>
?? ??? ??? ?<a href="#" class="subNavBtn" id="s4">教程</a>
?? ??? ??? ?<a href="#" class="subNavBtn end" id="s5">其他</a>
?? ??? ?</div>
?? ?</div>
?? ?<div class="section sTop">
?? ??? ?<div class="inner">
?? ??? ??? ?<h1>smint - 簡單的jQuery導航菜單固定插件演示</h1>
?? ??? ??? ?<p>點擊菜單看看效果</p>
?? ??? ?</div>
?? ?</div>
?? ?<div class="section s1">
?? ??? ?<div>
?? ??? ??? ?<h2>代碼</h2>
?? ??? ?</div>
?? ?</div>
?? ?<div class="section s2">
?? ??? ?<div class="inner">
?? ??? ??? ?<h2>素材</h2>
?? ??? ?</div>
?? ?</div>
?? ?<div class="section s3">
?? ??? ?<div class="inner">
?? ??? ??? ?<h2>模板</h2>
?? ??? ?</div>
?? ?</div>
?? ?<divclass="section s4">
?? ??? ?<div class="inner">
?? ??? ??? ?<h2>教程</h2>
?? ??? ?</div>
?? ?</div>
?? ?<divclass="section s5">
?? ??? ?<div class="inner">
?? ??? ??? ?<h2>其他</h2>
?? ??? ?</div>
?? ?</div>
</div>

注意:菜單的外部容器(如上例的 subMenu)需要設置樣式 position:absolute,并且每個菜單的 a 標簽需要設置 id,id 的值與下面對應區域的 class 的值一致。

JavaScript

$(function() {
?? ?$('.subMenu').smint({
?? ??? ?scrollSpeed : 1000
?? ?});
});

參數

smint 目前只有1個參數:scrollSpeed。

參數 類型 說明 默認值
scrollSpeed 整數 點擊菜單時,頁面滾動的速度,數值越小,速度越快 1000

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将