前言： 項目中讓實現一個簡單的上下視差滾動，就是當頁面滑動到某一固定位置時，讓上下兩頁面出現疊加效果，恢復時，展開恢復。
功能技術實現方式：元素定位，鼠標事件
思路1：
一開始想著設置滾動條監聽事件，當到固定位置時下方元素設置relative屬性(這樣可保證不改變其原有樣式而且可以實現元素位置的調整)，于是就誕生出一下代碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0; padding: 0; } .div1{ width: 100%; height: 500px; background: #FF0000; position: fixed; top: 0; left: 0; } .div2{ width: 100%; margin-top: 500px; height: 1000px; background: #22B0FC; position: relative; z-index: 2;; } </style> <body> <div class="div1">1111111</div> <div class="div2">22222222222222</div> </body> <script src="jquery-1.8.3.min.js"></script> <script> $(document).ready(function () { $(window).scroll(function () { var scrollTop=$(window).scrollTop(); //$(window).scrollTop()這個方法是當前滾動條滾動的距離 //$(window).height()獲取當前窗體的高度 //$(document).height()獲取當前文檔的高度 $('.div2').css('top',-scrollTop); }); }); </script></html>問題：運行以上代碼就會發現有一個很明顯的bug,雖然大體功能已經實現了，但是因為relative的元素不管如何移動，還是會占有原本的位置。然而我們的期望是，滾動條到達讓下方元素底部時就不應該滑動了，如何解決呢？
思路2：
我思考了良久，但是仍然沒發現可以讓元素既不占位置，又不改變自身樣式，所以我大膽放棄relative，選擇absolute定位，這個就需要我們自己做樣式的調整，具體代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0; padding: 0; } .clearfix:after { content: ''; display: block; clear: both; } .div1{ width: 100%; margin: 0 auto; height: 500px; background: bisque; position: fixed; top: 0; left: 0; } .div1 div{ width: 1200px; margin: 0 auto; height: 500px; background: #FF0000; } .div2{ width: 1200px; margin: 0 auto; height: 1500px; background: #22B0FC; z-index: 20000;; margin-top: 500px; } </style> <body> <div class="div1 clearfix"> <div>111111111111111111111111111111111111111</div> </div> <div class="div2">22222222222222</div> </body> <script src="jquery-1.8.3.min.js"></script> <script> var div2Height=Number($('.div2').offsetTop); var clientHeight=Number($(document).clientHeight); var totalHeight=div2Height-clientHeight; var objOffset=$('.div2').offset().top; var objOffsetLf=$('.div2').offset().left; $(document).ready(function () { //本人習慣這樣寫了 $(window).scroll(function () { var scrollTop=$(window).scrollTop(); var objHeight=objOffset-scrollTop; console.log(scrollTop); if(scrollTop>=0){ $('.div2').css({'left':objOffsetLf,'top':objHeight,'position':'absolute','margin-top':'0px'}); }else{ $('.div2').css({'position':'static','margin-top':'500px'}); } }); }); </script></html>
新聞熱點
疑難解答
圖片精選
