-
3.添加頁面加載 跟頁面窗口調(diào)整 是調(diào)用 trigger 出發(fā) scroll頁面滾動事件查看全部
-
2.用jq實現(xiàn)的代碼。查看全部
-
1.實現(xiàn)步驟查看全部
-
要求三個要素： 1：網(wǎng)頁的實際高度，也就是offsetHeight. 2：當(dāng)前瀏覽器窗口可視區(qū)域高度（眼睛所看到的區(qū)域），也就是clientHeight. 3：滾動條移動的距離，也就是 srollHeight. 當(dāng)某個條件達到觸發(fā)的時候（滾動的距離+ 可視區(qū)查看全部
-
<script type="text/javascript"> var jwindow=$(windown); 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-windowHeight), 'right':0; }) }else{ $('#j_Bdside').css({ 'position':'static' }) } }) window.onload=function(){ jwindow.trigger("scroll"); } jwindow.resize(function(){ jwindow.trigger("scroll"); }) </script>查看全部
-
JS方法獲取高度： 邊欄真實高度：domSider.offsetHeight； 屏幕可見區(qū)域高度:document.documentElement.clietHeight document.body.clientHeight; 屏幕滾動高度：document.documentElement.scrollTop document.body.scrollTop; 設(shè)置多個CSS屬性的方法：domSider.style.cssText = 'position:fixed;right:0;top:'+(-(sideHeight-screenHeight))+'px'; object.style.cssText='';可以設(shè)置多個樣式，第一次看到 mark 要求三個要素： 1：網(wǎng)頁的實際高度，也就是offsetHeight. 2：當(dāng)前瀏覽器窗口可視區(qū)域高度（眼睛所看到的區(qū)域），也就是clientHeight. 3：滾動條移動的距離，也就是 srollHeight. 當(dāng)某個條件達到觸發(fā)的時候（滾動的距離+ 可視區(qū)高度 > 網(wǎng)頁實際高度），觸發(fā)固定屬性； 同樣當(dāng)窗口resize的時候，也要判斷一次。 兼容問題： var screenHeight =document.documentElement.clientHeightdocument.body.clientHeight; //可視區(qū)高度，寬度也是一樣的。 var pageHeight=obj.offsetHeight; //網(wǎng)頁實際高度 var scrollHeight = document.documentElement.scrollTopdocument.body.scrollTop; //獲取滾動條滾動的高度，也可以說是距離網(wǎng)頁實際高度的原點的高度。查看全部
-
綁定事件 addEvent var addEvent=function(obj,event,fn){ if(obj.addEventListener) { //非IE瀏覽器 obj.addEventListener(event,fn,false); }else if(obj.attachEvent){ //IE obj.attachEvent('on'+evebt,fn); } }查看全部
-
JavaScript代碼實現(xiàn)查看全部
-
多次用到的對象最好事先定義在一個變量里：var jWindow = $(window); 首先獲取窗口滾動高度、屏幕可視區(qū)域的高度、以及右邊欄的高度。 jWindow.scrollTop();jWindow.height();('#side').height(); 然后在條件滿足時設(shè)置右邊欄的position fixed屬性以及相應(yīng)的top right值。 * top為負值 = -(有邊欄高度-屏幕可見區(qū)域高度) 1、css:position:fixed; 2、監(jiān)聽window上的滾動事件； 3、設(shè)置fixed條件判斷 滾動高度+屏幕高度>邊欄高度;查看全部
-
1、固定右側(cè)邊欄實現(xiàn)關(guān)鍵點：① CSS position fixed屬性② 監(jiān)聽window上的滾動事件③ 右側(cè)邊欄設(shè)置fixed條件判斷：滾動高度 + 屏幕高度 > 右側(cè)邊欄高度 2、使用jQuery為我們部署在服務(wù)器上的地址： <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();//屏幕可視區(qū)域的高度 ⑤ var sideHeight=$('#side').height();//右側(cè)邊欄的高度 4、部分關(guān)鍵代碼： if(scrollHeight+screenHeight>sideHeight){ $('#side').css({ 'top':-(sideHeight-screenHeight),//如果設(shè)成'top':0,就會跳到右側(cè)邊欄的最頂端 'right':0 }); }else{ $('#side').css({ 'position':'static';//position的默認取值是static }); } 部分關(guān)鍵代碼： window.onload=function (){ jWindow.trigger('scroll');//觸發(fā)window滾動的事件 }; jWindow.resize(function (){ jWindow.trigger('scroll'); });查看全部
-
滾動高度+屏幕高度>右側(cè)邊欄高度查看全部
-
不跟隨滾動具體代碼查看全部
-
計算高度查看全部
-
實現(xiàn)關(guān)鍵點查看全部
-
綁定事件 addEvent var addEvent=function(obj,event,fn){ if(obj.addEventListener) { //非IE瀏覽器 obj.addEventListener(event,fn,false); }else if(obj.attachEvent){ //IE obj.attachEvent('on'+evebt,fn); } }查看全部
舉報
0/150
提交
取消