【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】jQuery中怎么使用滾動(dòng)監(jiān)聽(tīng)實(shí)現(xiàn)商城樓梯式導(dǎo)航效果

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】jQuery中怎么使用滾動(dòng)監(jiān)聽(tīng)實(shí)現(xiàn)商城樓梯式導(dǎo)航效果

今天在下給大家分享一下jQuery中怎么使用滾動(dòng)監(jiān)聽(tīng)實(shí)現(xiàn)商城樓梯式導(dǎo)航效果的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。局部效果圖：html結(jié)構(gòu)，左側(cè)定位的導(dǎo)航需要一個(gè)ul，中間內(nèi)容，我是直接截得圖片，為了效果省事，也是用的ul，最后你們要用的話(huà)也可以用ul，或者div，但是每個(gè)區(qū)域得是一個(gè)div，例如，精選的放一個(gè)div，女裝的放一個(gè)div，所有的區(qū)域都套在一個(gè)大的div里面，也就是類(lèi)似于ul>li的結(jié)構(gòu)（只提供html結(jié)構(gòu)和jQuery，樣式的話(huà)根據(jù)設(shè)計(jì)稿）：<div

class="menu">

<ul>

<li

class="on"><i

class="iconfont"></i>精選</li>

<li><i

class="iconfont"></i>女裝</li>

<li><i

class="iconfont"></i>鞋包</li>

<li><i

class="iconfont"></i>男士</li>

<li><i

class="iconfont"></i>運(yùn)動(dòng)</li>

<li><i

class="iconfont"></i>飾品</li>

<li><i

class="iconfont"></i>精選</li>

<li><i

class="iconfont"></i>女裝</li>

<li><i

class="iconfont"></i>鞋包</li>

<li><i

class="iconfont"></i>男士</li>

<li><i

class="iconfont"></i>運(yùn)動(dòng)</li>

<li><i

class="iconfont"></i>飾品</li>

</ul>

</div>

<div

class="main">

<ul>

<li><img

src="images/main_pic1.png"

/></li>

<li><img

src="images/main_pic2.png"

/></li>

<li><img

src="images/main_pic3.png"

/></li>

<li><img

src="images/main_pic4.png"

/></li>

<li><img

src="images/main_pic5.png"

/></li>

<li><img

src="images/main_pic6.png"

/></li>

<li><img

src="images/main_pic7.png"

/></li>

<li><img

src="images/main_pic8.png"

/></li>

<li><img

src="images/main_pic9.png"

/></li>

<li><img

src="images/main_pic10.png"

/></li>

<li><img

src="images/main_pic11.png"

/></li>

<li><img

src="images/main_pic12.png"

/></li>

</ul>

</div><script

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

<script>

var

offon

=

true;

$(window).scroll(function(){//滾動(dòng)瀏覽器就會(huì)執(zhí)行

if(offon){

//獲取滾動(dòng)高度

var

_top

=

$(window).scrollTop();

if(_top>150){

$('.menu').show();

}else{

$('.menu').hide();

};

$('.main

ul

li').each(function(i){

//獲取當(dāng)前下標(biāo)

var

_index

=

$(this).index();

var

_height

=

$(this).offset().top+500;//獲取上偏移值

if(_height

>

_top){//優(yōu)先原則

$('.menu

ul

li').eq(_index).addClass('on').siblings().removeClass('on');

return

false;//跳出遍歷

};

});

};

});

$('.menu

ul

li').click(function(){

offon

=

false;

var

_index

=

$(this).index();

$(this).addClass('on').siblings().removeClass('on');

var

_height

=

$('.main

ul

li').eq(_index).off