-
1、固定右側邊欄實現關鍵點：① CSS position fixed屬性② 監聽window上的滾動事件③ 右側邊欄設置fixed條件判斷：滾動高度 + 屏幕高度 > 右側邊欄高度 2、使用jQuery為我們部署在服務器上的地址： <script src="https://code.jquery.com/jquery.js"></script> 3、① 多次用到的對象最好事先定義在一個變量里：var jWindow = $(window);//獲取window對象 ② jWindow.scroll(function(){ }//給window對象綁定滾動事件 ③ var scrollHeight=jWindow.scrollTop();//窗口滾動的高度 ④ var screenHeight=jWindow.height();//屏幕可視區域的高度 ⑤ var sideHeight=$('#side').height();//右側邊欄的高度 4、部分關鍵代碼?： if(scrollHeight+screenHeight>sideHeight){ $('#side').css({ 'top':-(sideHeight-screenHeight),//如果設成'top':0,就會跳到右側邊欄的最頂端 'right':0 }); }else{ $('#side').css({ 'position':'static';//position的默認取值是static }); } 部分關鍵代碼?： window.onload=function (){ jWindow.trigger('scroll');//觸發window滾動的事件 }; jWindow.resize(function (){ jWindow.trigger('scroll'); });查看全部
-
JS方法獲取高度： 邊欄真實高度：domSider.offsetHeight； 屏幕可見區域高度:document.documentElement.clietHeight || document.body.clientHeight; 屏幕滾動高度：document.documentElement.scrollTop || document.body.scrollTop; 設置多個CSS屬性的方法：domSider.style.cssText = 'position:fixed;right:0;top:'+(-(sideHeight-screenHeight))+'px';查看全部
-
加載和改變大小時，手動觸發scroll事件查看全部
-
具體代碼查看全部
-
滾動條查看全部
-
實現的關鍵點查看全部
-
實現關鍵點 1、css position fixed 2、監聽window上的滾動事件 3、設置fixed條件判斷 滾動高度+屏幕高度(屏幕的可視區)》邊欄高度 <div id="J_Bdside" class="side" > <script src="https://code.jquery.com/jquery.js"></script> <script> var jwindow = $(window); jwindow.scroll(function(){ var scrollHeight = jwindow.scrollTop(); var screenHeight = jwindow.height(); var sideHeight = $('#J_BdSide').height(); if(scrollHeight+screenHeight>sideHeight){ $(#J_BdSIDE).css({ 'position':'fixed', 'top':-(sideHeight-screenHeight), 'right':0 }); }else{ $('#J_BdSide').css({ 'position':'static' }); } }); window.onload = function(){ jwindow.trigger('scroll'); }; jwindow.resize(function(){ jwindow.trigger('scroll'); }); </script>查看全部
-
<div id="J_Bdside" class="side" >查看全部
-
實現關鍵點 1、css position fixed查看全部
-
div不隨著移動查看全部
-
任遠: renren查看全部
-
trigger("滾動事件") -- window.onload & window.resize查看全部
-
固定邊欄滾動特效查看全部
-
實現關鍵點：固定邊欄滾動特效查看全部
-
javascript的代碼實現固定邊欄滾動特效查看全部
舉報
0/150
提交
取消