scroll()和scrollTop()方法——實現電商網站中的電梯導航
要想實現電商網站的電梯導航效果，首先需要了解以下知識點：
jquery 事件 - scroll() 方法
對元素滾動的次數進行計數，當用戶滾動指定的元素時，會發生 scroll 事件。scroll 事件適用於所有可滾動的元素和 window 對象（瀏覽器窗口）。scroll() 方法觸發 scroll 事件，或規定當發生 scroll 事件時運行的函數。
jquery CSS 操作 - scrollTop() 方法
設置元素中滾動條的垂直偏移，scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置；scroll top offset 指的是滾動條相對於其頂部的偏移；如果該方法未設置參數，則返回以像素計的相對滾動條頂部的偏移。
【scrollTop()俗稱“卷邊函數”，獲取到的是當滾動條滾動時，該頁面文檔被瀏覽器最頂端所卷去的高度；另外還有scrollLeft()方法，顧名思義是被瀏覽器最左端所卷去的距離】
jQuery CSS 操作 - offset() 方法
offset() 方法返回或設置匹配元素相對於文檔的偏移（位置）。該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。
-
電梯導航的結構布局怎麽做？
布局這一塊並不是固定的，只要效果達到就好。<ul class="dianTi"> <li> 1F <div class="wenZi">服飾</div> </li> <li> 2F <div class="wenZi">美妝</div> </li> <li> 3F <div class="wenZi">手機</div> </li> <li> 4F <div class="wenZi">家電</div> </li> <li> 5F <div class="wenZi">數碼</div> </li> </ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
-
電梯導航的CSS樣式該怎麽寫？
寬度可以給一個固定的值；高度本應該由JS去控制，這裏是給的固定的值；定位方式采用的是固定定位，讓它垂直到中間，水平先到瀏覽器的中間，然後設置margin-left為負的網頁版心的一半距離，這樣就緊貼在頁面左側位置了；默認是隱藏的。<style type="text/css"> .dianTi{width: 30px; height: 150px; position: fixed; top: 50%; margin-top: -75px; left: 50%; margin-left: -660px; color: #666; cursor: pointer; display: none;} .dianTi li{height: 29px; border-bottom: 1px dotted #ccc; text-align: center; line-height: 29px; position: relative;} .wenZi{width: 29px; height: 29px; position: absolute; left: 0; top: 0; color: #C81623; background: #fff; display: none;} .dianTi li.current .wenZi{display: block;} .dianTi li:hover .wenZi{display: block; background: #C81623; color: #fff;} </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
-
怎麽實現最終的效果？
1.電商網站一般是吧商品分為一樓、二樓、三樓…所以，第一步先要獲取每一個樓層相對於document (0,0)的距離。//檢測樓層時，跳轉時，不需要那麽精確，所以減去100 var f1Top=$(‘.f1‘).offset().top-100; var f2Top=$(‘.f2‘).offset().top-100; var f3Top=$(‘.f3‘).offset().top-100; var f4Top=$(‘.f4‘).offset().top-100; var f5Top=$(‘.f5‘).offset().top-100;- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
2.檢測樓層，用scrollTop()方法獲取當滾動條滾動時每次最新的被卷去的高度，即當前可視區域內最頂部距離document (0,0)的距離，然後拿這個距離的值去和之前得到的每個樓層對應的值進行比較，就可以知道當前滾動條滾動到哪個區域了。這裏最好將這個功能性的模塊封裝起來，寫成一個方法，然後用$(window).scroll(jianCe)去調用。
var jianCe=function(){ var windowScrollTop=$(window).scrollTop(); if(windowScrollTop>=f5Top){ console.log(‘到達5樓‘); //到達5樓 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(4).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f4Top){ console.log(‘到達4樓‘); //到達4樓 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(3).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f3Top){ console.log(‘到達3樓‘); //到達3樓 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(2).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f2Top){ console.log(‘到達2樓‘); //到達2樓 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(1).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else if(windowScrollTop>=f1Top){ console.log(‘到達1樓‘); //到達一樓 $(‘.dianTi‘).show(); $(‘.dianTi li‘).eq(0).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); }else{ //不再5樓中的任意一層時，讓電梯導航隱藏 $(‘.dianTi‘).hide(); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
3.當點擊左側電梯導航時，也需要對應起來，因為在點擊時，按鈕會有一個特殊類用於突出顯示，如果從5層跳到1層，會經過4,3,2，這樣就會看到整個跳轉的過程，所以，這裏需要用到一個off（）方法，用於取消綁定事件，$(window).off(‘scroll’); 因為你移除了scroll事件，當前這個LI具備特殊類名還要再書寫一次，最後只需要判斷當前點擊的是第幾層，做相應的操作即可。
$(‘.dianTi li‘).click(function(event) { //在動畫運動的過程中，不希望current特殊類名跟著滿世界跑 //所以把讓current滿世界跑的源頭掐掉 //源頭：$(window).scroll() $(window).off(‘scroll‘); //因為你移除了scroll事件，當前這個LI具備特殊類名還要再書寫一次 $(this).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘); //需要知道現在要往幾層樓跳 //得到當前這個LI的序號，這個序號加1就是你需要去的樓層 var i=$(this).index()+1; if(i==5){ //要往第5層跳 //檢測樓層時，希望的差不多到了；跳轉時，需要精確，所以再加上100 //f5Top是5層距離document （0，0）點的距離 //但是當動畫執行完畢了，還要繼續檢測樓層 $(‘html,body‘).stop().animate({‘scrollTop‘:f5Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==4){ $(‘html,body‘).stop().animate({‘scrollTop‘:f4Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==3){ $(‘html,body‘).stop().animate({‘scrollTop‘:f3Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==2){ $(‘html,body‘).stop().animate({‘scrollTop‘:f2Top+100}, 500,function(){ $(window).scroll(jianCe); }); }else if(i==1){ $(‘html,body‘).stop().animate({‘scrollTop‘:f1Top+100}, 500,function(){ $(window).scroll(jianCe); }); } });
scroll()和scrollTop()方法——實現電商網站中的電梯導航