jQuery實現(xiàn)側邊導航欄及滑動電梯效果(仿淘寶)
更新時間：2022年03月28日 11:01:52 作者：一夕ξ
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實現(xiàn)側邊導航欄以及滑動電梯效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試
效果圖
實現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px
}
.box {
width: 1200px;
margin: 0 auto;
position: relative;
}
.navfix {
display: none;
width: 1200px;
height: 30px;
background-color: pink;
position: sticky;
top: 0px
}
.goodetem,
.contain1 {
width: 1200px;
height: 500px;
background-color: red;
}
.contain1 {
height: 300px;
background-color: rgb(226, 111, 130);
}
.youlike {
width: 1200px;
height: 1800px;
background-color: skyblue;
}
a {
text-decoration: none;
color: black
}
.bar a {
display: block;
width: 80px;
height: 80px;
background-color: grey;
text-align: center;
line-height: 40px;
}
.bar {
width: 100px;
height: 100px;
position: absolute;
left: 1210px;
top: 200px;
}
a:hover {
color: orange
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
<div class="top1" style="background-color:blue;width:1200px;height:60px;"></div>
<div class="navfix"></div>
<div class="contain1"></div>
<div class="goodetem"></div>
<div class="youlike"></div>
<div class="bar">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pinzhi">品質<br>好貨</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="like">猜你<br>喜歡</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="top" style="display:none">頂部</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >反饋</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >暴恐<br>舉報</a>
</div>
</div>
<script>
$(function() {
// console.log($('.bar').offset().top);
// console.log($('.bar').offset().left);
var a = $('.bar').offset().left
$(window).scroll(function() {
console.log($('document, html').scrollTop());
if ($('document, html').scrollTop() >= $('.bar').offset().top) {
$('.bar').css('position', 'fixed')
$('.bar').css('top', 0)
$('.bar').css('left', a)
}
if ($('document, html').scrollTop() < 200) {
$('.bar').css('position', 'absolute')
$('.bar').css('top', 200)
$('.bar').css('left', 1210)
}
if ($('document, html').scrollTop() >= 300) {
$('.top').css('display', 'block')
} else {
$('.top').css('display', 'none')
}
if (
$('document, html').scrollTop() >= 65
) {
$('.navfix').css('display', 'block')
} else {
$('.navfix').css('display', 'none')
}
})
//添加bar的點擊事件，返回到相應的位置上去
//優(yōu)化，應該給每個小模塊添加一個索引號，與大盒子相對應，一開始將所有的模塊一起添加一個點擊事件，再回到相對應大盒子的位置
$('.top').click(function() {
$('document, html').stop().animate({
scrollTop: 0
})
})
$('.pinzhi').click(function() {
$('document, html').stop().animate({
scrollTop: 358
})
})
$('.like').click(function() {
$('document, html').stop().animate({
scrollTop: 888
})
})
})
</script>
</body>
</html>品優(yōu)購電梯導航效果：
1、當滾動到今日推薦模塊，就讓電梯導航顯示出來
2、點擊電梯導航頁面可以滾動到相應的內(nèi)容區(qū)域
沒必要每個模塊都加一個點擊事件
1、核心：電梯導航模塊和內(nèi)容區(qū)模塊是一一對應的
根據(jù)左側小盒子的索引號來找相應的大盒子
console.log($(this).index()); //獲取點擊的索引號
console.log($('.folr div').eq($(this).index())); //獲取與索引號相對應的內(nèi)容
2、當點擊電梯導航某個小模塊，就可以拿到當前小模塊的索引號
3、就可以把animate要移動的距離求出來：當前索引號內(nèi)容區(qū)模塊他的offset（）.top
4、當頁面滾動到內(nèi)容區(qū)域的某個模塊，左側電梯導航，相對應的小li模塊，也會添加current類，兄弟移除current類
1、這個功能是在頁面滾動的時候觸發(fā)的，因此需要寫在頁面滾動事件里面
2、需要用到each，遍歷內(nèi)容區(qū)域大模塊，each里面能拿到內(nèi)容區(qū)域每一個模塊元素和索引號
3、判斷條件：被卷去的頭部大于等于內(nèi)容區(qū)域里面每個模塊的offset（）.top。
4、利用這個索引號找到相應的電梯導航小li添加類
bug：
1、當點擊小li，執(zhí)行動畫的時候，不需要執(zhí)行頁面滾動事件里面li的背景選擇，不加類名--節(jié)流閥（互斥鎖） var flag = true 通過多加一個判斷條件來實現(xiàn) 當animate執(zhí)行完之后，就打開頁面滾動里面li的背景選擇（回調函數(shù)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
margin: 10px auto;
position: relative;
}
.hoomtool,
.phone,
.diannao,
.jiayodianqi,
.shenghuo {
width: 600px;
height: 800px;
}
.hoomtool {
background-color: pink;
}
.phone {
background-color: red;
}
.diannao {
background-color: blue;
}
.jiayodianqi {
background-color: grey;
}
.shenghuo {
background-color: skyblue;
}
a {
text-decoration: none;
color: black;
font-size: 25px;
}
.bar {
width: 140px;
position: fixed;
top: 300px;
left: 20px;
display: none;
margin: 0px;
padding: 0px;
}
ul {
padding: 0px;
}
li {
list-style: none;
height: 50px;
text-align: center;
line-height: 50px;
}
.nav {
height: 400px;
background-color: purple;
}
.tuijian {
height: 50px;
background-color: rgb(121, 97, 97)
}
.current {
background-color: red;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
<div class="nav"></div>
<div class="tuijian" class="dff">今日推薦</div>
<!-- 單獨包括再一個大盒子里面，便于索引--內(nèi)容區(qū)域 -->
<div class="folr">
<div class="hoomtool">家用電器</div>
<div class="phone">手機通訊</div>
<div class="diannao">電腦辦公</div>
<div class="jiayodianqi">家居家具</div>
<div class="shenghuo">生活用品</div>
</div>
<div class="bar">
<ul>
<li class="current"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家用電器</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >手機通訊</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >電腦辦公</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家居家具</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >生活用品</a></li>
</ul>
</div>
</div>
<script>
$(function() {
var flag = true
var a = $('.tuijian').offset().top
// console.log(a);
$('.bar').fadeOut()
$(window).scroll(function() {
//1、導航欄的顯示與隱藏
if ($('document, html').scrollTop() >= a) {
$('.bar').fadeIn()
} else {
$('.bar').fadeOut()
}
//4、當頁面滾動到內(nèi)容區(qū)域的某個模塊，左側電梯導航，相對應的小li模塊，也會添加current類，兄弟移除current類
if (flag == true) {
$('.folr div').each(function(index, eld) {
// console.log($(eld).offset().top);
if ($('document, html').scrollTop() >= $(eld).offset().top) {
$('ul li').eq(index).addClass('current')
$('ul li').eq(index).siblings().removeClass('current')
}
})
}
})
//2、電梯對應效果
$('ul li').click(function() {
console.log($(this).index()); //獲取點擊的索引號
//每次點擊li，就需要計算頁面要去往的位置
//選出對應索引號內(nèi)容區(qū)的盒子
console.log($('.folr div').eq($(this).index())); //獲取與索引號相對應的內(nèi)容
flag = false
// $('document,html').scrollTop($('.folr div').eq($(this).index()).offset().top)//要添加動畫效果（動畫滾動效果）
$('document,html').animate({
scrollTop: $('.folr div').eq($(this).index()).offset().top
//只要一滾動就會觸發(fā)上面的滾動事件
}, function() {
flag = true
})
//3、點擊之后讓當前的li添加current類名，兄弟則移除類名
$(this).addClass('current')
$(this).siblings().removeClass('current')
})
})
</script>
</body>
</html>以上就是jQuery實現(xiàn)側邊導航欄及滑動電梯效果(仿淘寶)的詳細內(nèi)容，更多關于jQuery導航欄的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了分別用jQuery和CSS將背景圖片進行拉伸，讓它在頁面中隨著瀏覽器尺寸進行拉伸，就像我們的電腦桌面壁紙效果,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了使用jquery庫實現(xiàn)電梯導航效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要是對使用jquery操作iframe的幾種方法進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jquery實現(xiàn)簡單文字提示效果的方法,以完整實例形式分析了jQuery插件jquery-1.2.6.pack.js實現(xiàn)文字提示效果的相關技巧,并提供了jquery-1.2.6.pack.js的本站下載地址,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了一款非?？犰诺膉Query全屏3D焦點圖動畫效果其特點是整個焦點圖基本是全屏顯示的，非常大氣，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了jquery讀寫cookie操作,結合實例形式分析了jQuery針對cookie的常用讀寫操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery中bind()方法用法,實例分析了bind()方法的功能、定義及為匹配元素的特定事件綁定事件處理方法的技巧,需要的朋友可以參考下2015-01-01
Jquery 選擇器是最基本的操作了，當我們用原生的javascript的時候，我們?yōu)榱诉x擇一個對象不得不花費九頭二虎之力2010-04-04
juqery 學習之四 篩選過濾函數(shù)說明，學習jquery的朋友可以參考下。2010-11-11
用Jquery去操作HTML元素很方便，能夠靈活自如的去查找。其實CSS也可以靈活方便的去查找篩選，以下用到的一些，整理了一下，還有很多有趣的用法，后續(xù)會繼續(xù)添加。2011-07-07