如何用js實(shí)現(xiàn)鼠標(biāo)向上滾動時(shí)浮動導(dǎo)航

更新時(shí)間：2016年07月18日 11:02:50 投稿：daisy

今天給大家介紹一下使用JavaScript判斷鼠標(biāo)滑輪是不是向上滾動，當(dāng)向上滾動的時(shí)候，導(dǎo)航條浮動在頂部位置。示例代碼如下。

為什么會有這個需求呢？有沒有發(fā)現(xiàn)在國外的一些網(wǎng)站，當(dāng)你向上滾動時(shí)，導(dǎo)航條浮動在頂部位置。用戶如果是想看內(nèi)容就可以直接點(diǎn)擊到達(dá)，省去很多拖動的時(shí)間，當(dāng)然返回頂部也是比較容易。但有時(shí)候返回頂部這個按鈕往往被人忽略了。下面一起來看看代碼和演示（引入jQuery 1.9）。

判斷鼠標(biāo)向上滾動，或者向下滾動，可以通過對比用戶的上一次滾動的坐標(biāo)和下一次的坐標(biāo)，當(dāng)上一次小于下一次時(shí)，即用戶在向下滾動，反之，則說明用戶在向上滾動。滾動的坐標(biāo)值可以取窗口的scrollTop。

HTML代碼示例

<div id="Jnav">
 <ul class="nav">
 <li><a >WEB前端開發(fā)</a></li>
 <li><a href="#">前端開發(fā)博客</a></li>
 <li><a href="#">前端開發(fā)</a></li>
 <li><a href="#">前端開發(fā)</a></li>
 </ul>
</div>

JavaScript代碼示例

var $nav = $('#Jnav'), navTop = $nav.offset().top, navH = $nav.outerHeight(),winTop_1=0,winWidth=$(window).width(), holder=jQuery('<div>');
$(window).on('scroll',function(){
 var winTop_2 = $(window).scrollTop();
 holder.css('height',navH);
 //開始浮動，不過不顯示
 if(winTop_2>navTop && winWidth>980){
 holder.show().insertBefore($nav);
 $nav.addClass('fixed-nav');
 }else{
 holder.hide();
 $nav.removeClass('fixed-nav');
 }
 //判斷鼠標(biāo)向上滾動，顯示出來
 if(winTop_2>winTop_1 && winWidth>980){
 $nav.removeClass('fixed-nav-appear');
 }else if(winTop_2<winTop_1){
 $nav.addClass('fixed-nav-appear');
 }
 winTop_1 = $(window).scrollTop();
})

CSS代碼示例

.nav{width:980px; margin:0 auto;}
.nav li{display:inline-block; *display:inline; *zoom:1; margin:0 10px;}
.nav li a{display:block; padding:5px 10px;}
.fixed-nav{
 position: fixed;
 width:100%;
 top:-40px; 
 -webkit-transition: top .5s;
  -moz-transition: top .5s;
  -o-transition: top .5s;
  transition: top .5s;
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.fixed-nav-appear{top:0;}

以上就是怎么用js實(shí)現(xiàn)鼠標(biāo)向上滾動時(shí)浮動導(dǎo)航的示例代碼，感興趣可以參考下。

您可能感興趣的文章:

相關(guān)文章

基于JS實(shí)現(xiàn)將JSON數(shù)據(jù)轉(zhuǎn)換為TypeScript類型聲明的工具
在TypeScript?項(xiàng)目中，我們經(jīng)常需要使用聲明一系列的ts類型。然而，手動寫的效率實(shí)在太低，本文就實(shí)現(xiàn)一個工具將?JSON?數(shù)據(jù)轉(zhuǎn)換為?TypeScript?類型定義，需要的可以參考一下
2023-04-04
javascript full screen 全屏顯示頁面元素的方法
要想讓頁面的某個元素全屏顯示，就像在網(wǎng)頁上看視頻的時(shí)候，可以全屏觀看一樣，該怎么實(shí)現(xiàn)呢
2013-09-09
『JavaScript』限制Input只能輸入數(shù)字實(shí)現(xiàn)思路及代碼
一個文字方塊必須限制只能輸入數(shù)字（或是小數(shù)點(diǎn)）并且要支援 IE 和 Firefox，接下來為大家介紹下如何解決這個需求
2013-04-04
js實(shí)現(xiàn)消滅星星(web簡易版)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)web簡易版的消滅星星，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
JS畫布動態(tài)實(shí)現(xiàn)黑客帝國背景效果
這篇文章主要為大家詳細(xì)介紹了JS畫布動態(tài)實(shí)現(xiàn)黑客帝國背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法,簡單介紹了雙向鏈表的原理,并結(jié)合實(shí)例形式分析了雙向鏈表的定義與使用方法,需要的朋友可以參考下
2017-10-10
JavaScript 對象成員的可見性說明
與java等基于類的面向?qū)ο笳Z言的private、protected、public等關(guān)鍵字的用途類似，基于對象的JavaScript語言，在對象構(gòu)造上也存在類似的成員可見性問題。
2009-10-10
wow.js實(shí)現(xiàn)炫酷的頁面滾動伴隨動畫示例詳解
這篇文章主要為大家介紹了wow.js實(shí)現(xiàn)炫酷的頁面滾動伴隨動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
javascript中的作用域和閉包詳解
這篇文章主要向大家介紹了javascript中的作用域和閉包，以及利用js閉包實(shí)現(xiàn)循環(huán)綁定事件，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript實(shí)現(xiàn)實(shí)時(shí)更新系統(tǒng)時(shí)間的實(shí)例代碼
本文給大家分享javascript實(shí)現(xiàn)實(shí)時(shí)更新系統(tǒng)時(shí)間的實(shí)例代碼，代碼簡單易懂，非常不錯，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-04-04