使用jquery庫實現電梯導航效果
一般來說，一些大型的電商網站首頁，頁面內容很多，頁面會很長，這時候大部分網站都選擇使用電梯導航，使頁面跳轉到相應位置或者返回頂部。
下面使用jquery庫來實現電梯導航
基本思路
電梯導航基本上就是使用元素距離頁面頭部的高度offsetTop和頁面滾動的距離scrollTop來進行比較事項相應的效果。
1、頁面滾動到相應的位置，實現電梯導航的顯示與隱藏
2、頁面滾動到相應的位置，電梯導航的按鈕添加或者移出相應的類
3、點擊電梯導航按鈕，實現頁面的滾動和為按鈕添加或者移出相應的類
4、點擊頂部按鈕，返回頂部
代碼實現
html代碼
<div class="header">頭部</div> <div class="banner">焦點圖</div> <div class="content"> <div class="qinzi w">親子</div> <div class="liren w">麗人</div> <div class="xuexi w">學習</div> <div class="lvyou w">旅遊</div> <div class="zhusu w">住宿</div> <div class="meishi w">美食</div> </div> <div class="footer">尾部</div> <!-- 電梯導航 --> <div class="floor" style="display: none;"> <ul> <li>親子</li> <li>麗人</li> <li>學習</li> <li>旅遊</li> <li>住宿</li> <li>美食</li> </ul> <span>頂部</span> </div>
css代碼
*{
padding: 0;
margin: 0;
}
body {
font-size: 30px;
}
.header {
width: 1100px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
.banner {
width: 1100px;
height: 400px;
background-color: skyblue;
margin: 0 auto;
}
.footer {
width: 1100px;
height: 300px;
background-color: darkolivegreen;
margin: 0 auto;
}
.content {
width: 1100px;
margin: 0 auto;
}
.content .qinzi {
width: 100%;
height: 324px;
background-color: rosybrown;
}
.content .liren {
width: 100%;
height: 304px;
background-color: slategrey;
}
.content .xuexi {
width: 100%;
height: 300px;
background-color: khaki;
}
.content .lvyou {
width: 100%;
height: 300px;
background-color: greenyellow;
}
.content .zhusu {
width: 100%;
height: 300px;
background-color: darkcyan;
}
.content .meishi {
width: 100%;
height: 300px;
background-color: lightgreen;
}
.floor {
width: 50px;
position: fixed;
top: 150px;
left: 50%;
margin-left: -620px;
font-size: 16px;
text-align: center;
}
.floor li {
width: 50px;
height: 30px;
background-color: grey;
margin-bottom: 5px;
line-height: 30px;
list-style: none;
cursor: pointer;
}
span {
display: block;
width: 50px;
height: 30px;
background-color: grey;
margin-bottom: 5px;
line-height: 30px;
list-style: none;
cursor: pointer;
}
.floor .current {
background-color: hotpink;
}
JavaScript代碼
var flag = true; //使用節流閥
//頁面剛開始隱藏，當頁面滾動到content的時候，電梯導航顯示
$(function () {
//頁面刷新時調用一次
//封裝函數，切換顯示與隱藏
var contentTop = $(".content").offset().top;
toggleTool();
function toggleTool() {
if ($(document).scrollTop() >= contentTop) {
$(".floor").fadeIn();
} else {
$(".floor").fadeOut();
}
}
$(window).scroll(function () {
toggleTool()
//頁面滾動到相應位置，電梯導航按鈕添加current類
if (flag) {
$('.content .w').each(function (i, ele) {
var cuHeight = ele.offsetHeight / 2;
if ($(document).scrollTop() >= $(ele).offset().top - cuHeight) {
$('.floor li').eq(i).addClass('current').siblings().removeClass();
}
})
}
})
//點擊電梯導航按鈕，頁面跳轉到相應位置，使用jquery裡面的animate
$('.floor li ').click(function () {
flag = false;
$(this).addClass('current').siblings().removeClass();
var index = $(this).index();
var current = $('.content .w').eq(index).offset().top;
$('html,body').stop().animate({
scrollTop: current
}, function () {
flag = true;
})
})
$('.floor span').click(function () {
$(this).addClass('current');
$('html,body').stop().animate({
scrollTop: 0
})
})
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。