-
3.添加頁面加載 跟頁面窗口調整 是調用 trigger 出發 scroll頁面滾動事件查看全部
-
2.用jq實現的代碼。查看全部
-
1.實現步驟查看全部
-
要求三個要素： 1：網頁的實際高度，也就是offsetHeight. 2：當前瀏覽器窗口可視區域高度（眼睛所看到的區域），也就是clientHeight. 3：滾動條移動的距離，也就是 srollHeight. 當某個條件達到觸發的時候（滾動的距離+ 可視區查看全部
-
<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； 屏幕可見區域高度:document.documentElement.clietHeight document.body.clientHeight; 屏幕滾動高度：document.documentElement.scrollTop document.body.scrollTop; 設置多個CSS屬性的方法：domSider.style.cssText = 'position:fixed;right:0;top:'+(-(sideHeight-screenHeight))+'px'; object.style.cssText='';可以設置多個樣式，第一次看到 mark 要求三個要素： 1：網頁的實際高度，也就是offsetHeight. 2：當前瀏覽器窗口可視區域高度（眼睛所看到的區域），也就是clientHeight. 3：滾動條移動的距離，也就是 srollHeight. 當某個條件達到觸發的時候（滾動的距離+ 可視區高度 > 網頁實際高度），觸發固定屬性； 同樣當窗口resize的時候，也要判斷一次。 兼容問題： var screenHeight =document.documentElement.clientHeightdocument.body.clientHeight; //可視區高度，寬度也是一樣的。 var pageHeight=obj.offsetHeight; //網頁實際高度 var scrollHeight = document.documentElement.scrollTopdocument.body.scrollTop; //獲取滾動條滾動的高度，也可以說是距離網頁實際高度的原點的高度。查看全部
-
綁定事件 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代碼實現查看全部
-
多次用到的對象最好事先定義在一個變量里：var jWindow = $(window); 首先獲取窗口滾動高度、屏幕可視區域的高度、以及右邊欄的高度。 jWindow.scrollTop();jWindow.height();('#side').height(); 然后在條件滿足時設置右邊欄的position fixed屬性以及相應的top right值。 * top為負值 = -(有邊欄高度-屏幕可見區域高度) 1、css:position:fixed; 2、監聽window上的滾動事件； 3、設置fixed條件判斷 滾動高度+屏幕高度>邊欄高度;查看全部
-
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'); });查看全部
-
滾動高度+屏幕高度>右側邊欄高度查看全部
-
不跟隨滾動具體代碼查看全部
-
計算高度查看全部
-
實現關鍵點查看全部
-
綁定事件 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
提交
取消