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