jquery仿百度百科底部浮動(dòng)導(dǎo)航特效
更新時(shí)間：2015年08月08日 15:26:04 投稿：hebedich
這篇文章主要介紹了jquery仿百度百科底部浮動(dòng)導(dǎo)航特效,需要的朋友可以參考下
jquery類似百度百科底部導(dǎo)航預(yù)覽，代碼很簡(jiǎn)單，這里就不多廢話了。
效果圖：
CSS
* {
margin: 0;
padding: 0
}
.wrap {
width: 1000px;
overflow: hidden;
margin: 0 auto;
}
.content {
width: 780px;
float: left;
}
.slide {
width: 200px;
float: right;
}
HTML
<div class="wrap">
<div class="content">
<h2 class="headline-1">
<a class="anchor-1" name="1"></a>
<span class="headline-1-index">1</span>
<span class="headline-content">part1</span>
</h2>
<div class="para">
content1,content1
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="2"></a>
<span class="headline-2-index">2</span>
<span class="headline-content">part2</span>
</h2>
<div class="para">
content2,content2
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-2">
<a class="anchor-2" name="2-1"></a>
<!--<span class="headline-2-index">2-1</span>-->
<span class="headline-content">part2-1</span>
</h2>
<div class="para">
content2-1,content2-1
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-2">
<a class="anchor-2" name="2-2"></a>
<!--<span class="headline-1-index">2-2</span>-->
<span class="headline-content">part2-2</span>
</h2>
<div class="para">
content2-2,content2-2
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="3"></a>
<span class="headline-1-index">3</span>
<span class="headline-content">part3</span>
</h2>
<div class="para3">
content,content
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="4"></a>
<span class="headline-1-index">4</span>
<span class="headline-content">part4</span>
</h2>
<div class="para4">
content,content
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="5"></a>
<span class="headline-1-index">5</span>
<span class="headline-content">part5</span>
</h2>
<div class="para">
content5,content5
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="6"></a>
<span class="headline-1-index">6</span>
<span class="headline-content">part6</span>
</h2>
<div class="para">
content6,content6
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="7"></a>
<span class="headline-1-index">7</span>
<span class="headline-content">part7</span>
</h2>
<div class="para">
content7,content7
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="8"></a>
<span class="headline-1-index">8</span>
<span class="headline-content">part8</span>
</h2>
<div class="para">
content8,content8
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="9"></a>
<span class="headline-1-index">9</span>
<span class="headline-content">part9</span>
</h2>
<div class="para">
content9,content9
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="10"></a>
<span class="headline-1-index">10</span>
<span class="headline-content">part10</span>
</h2>
<div class="para">
content10,content10
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="11"></a>
<span class="headline-1-index">11</span>
<span class="headline-content">part11</span>
</h2>
<div class="para">
content11,content11
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="12"></a>
<span class="headline-1-index">12</span>
<span class="headline-content">part12</span>
</h2>
<div class="para">
content12,content12
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="13"></a>
<span class="headline-1-index">13</span>
<span class="headline-content">part13</span>
</h2>
<div class="para">
content13,content13
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="14"></a>
<span class="headline-1-index">14</span>
<span class="headline-content">part14</span>
</h2>
<div class="para">
content14,content14
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<h2 class="headline-1">
<a class="anchor-1" name="15"></a>
<span class="headline-1-index">15</span>
<span class="headline-content">part15</span>
</h2>
<div class="para">
content15,content15
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
bottom
</div>
</div>
<div class="slide" style="">
<div id="sideToolbar" style="position: fixed; bottom: 0">
<div id="sideCatalog" class="sideCatalogBg" style="visibility: visible;">
<div id="sideCatalog-sidebar">
<div class="sideCatalog-sidebar-top"></div>
<div class="sideCatalog-sidebar-bottom"></div>
</div>
<div id="sideCatalog-updown" style="visibility: visible;">
<div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻頁(yè)"></div>
<div id="sideCatalog-down" class="sideCatalog-down-enable" title="向下翻頁(yè)"></div>
</div>
<div id="sideCatalog-catalog">
<dl style="width:175px;zoom:1">
<!--
<dd id="sideToolbar-item-0-1" class="sideCatalog-item2 heightlight">
<span class="sideCatalog-index1">1</span>
<a class="nslog:1026" onclick="return false;" title="part1" href="#1">part1</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd id="sideToolbar-item-0-2" class="sideCatalog-item1">
<span class="sideCatalog-index1">2</span>
<a class="nslog:1026" onclick="return false;" title="part2" href="#2">part2</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd id="sideToolbar-item-0-2-1" class="sideCatalog-item2">
<span class="sideCatalog-index1">2-1</span>
<a class="nslog:1026" onclick="return false;" title="part2" href="#2-1">part2-1</a>
<span class="sideCatalog-dot"></span>
</dd>
-->
</dl>
</div>
</div>
<a id="sideCatalogBtn" class="" style="visibility: visible;" href="javascript:void(0);"></a>
<a id="sideToolbar-up" style="visibility: visible;" title="返回頂部" href="javascript:void(0)"></a>
</div>
</div>
</div>
JS
<script>
var allEle = $(':header[class*="headline"]');
var headLen = allEle.length;
var ddArr = [];
//根據(jù)頁(yè)面內(nèi)容生成slide導(dǎo)航；
allEle.each(function(i){
var sideIndex,
sideName,
ddId,
highlight='',
ddClass,
sideAnchor;
sideName = $(this).find('.headline-content').text();
if($(this).hasClass('headline-1')){
sideAnchor = sideIndex = $(this).find('.anchor-1').eq(0).attr('name');
ddClass = 'sideCatalog-item1';
}else{
sideAnchor = $(this).find('.anchor-2').eq(0).attr('name');
sideIndex = sideAnchor.replace('-','.');
ddClass = 'sideCatalog-item2';
}
ddId = 'sideToolbar-item-0-'+ sideAnchor;
if(i==0){
highlight = 'highlight';
}
var ddHtml = '<dd id="'+ ddId +'" class="'+ddClass + ' ' + highlight +'">'
+ '<span class="sideCatalog-index1">'+ sideIndex +'</span>'
+ '<a class="nslog:1026" onclick="return false;" title="part'+sideAnchor+'" href="#'+sideAnchor+'">'+ sideName +'</a>'
+ '<span class="sideCatalog-dot"></span>'
+ '</dd>';
ddArr.push(ddHtml);
});
$('#sideCatalog-catalog dl').html(ddArr.join(''));
//設(shè)置導(dǎo)航的位置
var slideTop = $(window).height() - $('.slide').height();
$('.slide').css('top',slideTop);
var slideInnerHeight = $('#sideCatalog-catalog dl').height();
var slideOutHeight = $('#sideCatalog-catalog').height();
var enableTop = slideInnerHeight - slideOutHeight;
var step = 50;
//點(diǎn)擊向上的按鈕
$('#sideCatalog-down').bind('click', function () {
if ($(this).hasClass('sideCatalog-down-enable')) {
if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {
$('#sideCatalog-catalog dl').stop().animate({'top': '-=' + step}, 'fast');
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
} else {
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
$(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
}
} else {
return false;
}
})
//點(diǎn)擊向下的按鈕
$('#sideCatalog-up').bind('click', function () {
if ($(this).hasClass('sideCatalog-up-enable')) {
if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {
$('#sideCatalog-catalog dl').stop().animate({'top': '+=' + step}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
} else {
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
$(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
}
} else {
return false;
}
})
//點(diǎn)擊導(dǎo)航中的各個(gè)目錄
$('#sideCatalog-catalog dl').delegate('dd', 'click', function () {
var index = $('#sideCatalog-catalog dl dd').index($(this));
scrollSlide($(this), index);
var ddIndex = $(this).find('a').stop().attr('href').lastIndexOf('#');
var ddId = $(this).find('a').stop().attr('href').substring(ddIndex+1);
var windowTop = $('a[name="' + ddId + '"]').offset().top;
$('body,html').animate({scrollTop: windowTop}, 'fast');
})
//滾動(dòng)頁(yè)面，即滾動(dòng)條滾動(dòng)
$(window).scroll(function () {
if($(this).scrollTop()>$(this).height()){
$('.slide').show();
}else{
$('.slide').hide();
}
for (var i=headLen-1; i>=0; i--) {
if ($(this).scrollTop() >=allEle.eq(i).offset().top - allEle.eq(i).height()) {
var index = i;
$('#sideCatalog-catalog dl dd').eq(index).addClass('highlight').siblings('dd').removeClass('highlight');
scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);
return false;
} else {
$('#sideCatalog-catalog dl dd').eq(0).addClass('highlight').siblings('dd').removeClass('highlight');
}
}
})
//導(dǎo)航的滾動(dòng)，以及向上，向下按鈕的顯示隱藏
function scrollSlide(that, index){
if (index < 5) {
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
$('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
} else if (index > 11) {
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
} else {
var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $('#sideCatalog-catalog').offset().top);
$('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
}
}
//置頂
$('#sideToolbar-up').bind('click', function(){
$('body,html').animate({scrollTop: 0}, 'fast');
})
//slide內(nèi)容的顯示與隱藏
$('#sideCatalogBtn').bind('click', function(){
if($(this).hasClass('sideCatalogBtnDisable')){
$(this).removeClass('sideCatalogBtnDisable');
$('#sideCatalog').css('visibility','visible');
}else{
$(this).addClass('sideCatalogBtnDisable');
$('#sideCatalog').css('visibility','hidden');
}
})
</script>
您可能感興趣的文章:
- jQuery之浮動(dòng)窗口實(shí)現(xiàn)代碼(兩種方法)
- JQuery 實(shí)現(xiàn)的頁(yè)面滾動(dòng)時(shí)浮動(dòng)窗口控件
- 使用jQuery制作浮動(dòng)工具欄的實(shí)例分享
- jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼
- jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動(dòng)層插件
- jQuery 實(shí)現(xiàn)側(cè)邊浮動(dòng)導(dǎo)航菜單效果
- jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- jQuery實(shí)現(xiàn)div浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果
- jQuery實(shí)現(xiàn)底部浮動(dòng)窗口效果
相關(guān)文章
有時(shí),要實(shí)現(xiàn)對(duì)于一篇文章的關(guān)鍵詞部分的提示,想實(shí)現(xiàn)的效果比如是,當(dāng)鼠標(biāo)移動(dòng)到這個(gè)關(guān)鍵詞時(shí),彈出相關(guān)的一段文字或圖片的介紹。2010-01-01
jQuery Datatable 多個(gè)查詢條件自定義提交事件(推薦)
這篇文章主要介紹了jQuery Datatable 多個(gè)查詢條件自定義提交事件的相關(guān)資料,需要的朋友可以參考下2017-08-08
jQuery定義背景動(dòng)態(tài)切換效果的方法
這篇文章主要介紹了jQuery定義背景動(dòng)態(tài)切換效果的方法,實(shí)例分析了jQuery操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能
點(diǎn)贊，網(wǎng)絡(luò)用語(yǔ)，表示“贊同”、“喜愛(ài)”。今天小編通過(guò)實(shí)例代碼給大家分享jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能，需要的朋友參考下吧2017-07-07
下面小編就為大家?guī)?lái)一篇使用jQuery和ajax代替iframe的方法(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
在線引用最新jquery文件的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇在線引用最新jquery文件的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
本文給大家分享的是使用jQuery制作的模仿百度時(shí)間軸特效的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-07-07
javascript 全角轉(zhuǎn)換實(shí)現(xiàn)代碼
當(dāng)客戶端用戶切換輸入法至全角時(shí)可能您的表單提交會(huì)有漏洞哦！不過(guò)事實(shí)上js有這功能 可以將其轉(zhuǎn)換為非全角字符！2009-07-07
這篇文章主要介紹了jquery清空表單數(shù)據(jù)的示例,需要的朋友可以參考下2014-02-02
IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法
這篇文章主要介紹了IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法,需要的朋友可以參考下2015-02-02