jQuery寫的文章內容頁右側浮動滾動

hmhz發表於2019-02-16

很久前寫的程式碼,3種模式,現在發出來與大家分享,其實這塊的思路還有需要些優化,望大家來優化探討

// 左右側滾動 (左右兩邊DIV高度不確定,獲取左右兩邊DIV高度,左側高於右側,則右側浮動,否則,左側滾動)
function HomeScroll(a,b){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var c=$(a),d=$(b);if(c.length>0&&d.length>0){function g(){var g=$(window).scrollLeft(),h=$(window).scrollTop(),i=$(document).height(),j=$(window).height(),k=c.height(),l=d.height(),e=d.offset().top,f=c.offset().top,m=k>l?f:e,n=k>l?d:c,o=k>l?c.offset().left+c.outerWidth(!0)-g:d.offset().left-c.outerWidth(!0)-g,p=k>l?l:k,q=k>l?k:l,r=parseInt(q-j)-parseInt(p-j);$(a+","+b).removeAttr("style"),j>i||p>q||m>h||p-j+m>=h?n.removeAttr("style"):j>p&&h-m>=r||p>j&&h-m>=q-j?n.attr("style","margin-top:"+r+"px;"):n.attr("style","_margin-top:"+(h-m)+"px;position:fixed;left:"+o+"px;"+(j>p?"top":"bottom")+":0;")}$(window).resize(g).scroll(g).trigger("resize")}}

// 左側滾動 (明確右邊DIV高於左側,則左側浮動)
function HomeScrollL(a,d){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var e=$(a),c=$(d);if(e.length>0&&c.length>0){function f(){var m=$(window).scrollLeft(),n=$(window).scrollTop(),k=$(document).height(),h=$(window).height(),g=e.height(),j=c.height(),b=c.offset().top,l=c.offset().left-e.outerWidth(!0)-m,i=parseInt(j-h)-parseInt(g-h);if(k<h||g>j||n<b||n<=g-h+b){e.removeAttr("style")}else{if(h>g&&(n-b)>=i||h<g&&(n-b)>=(j-h)){e.attr("style","margin-top:"+i+"px;")}else{e.attr("style","_margin-top:"+(n-b)+"px;position:fixed;left:"+l+"px;"+(h>g?"top":"bottom")+":0;")}}}$(window).resize(f).scroll(f).trigger("resize")}};

// 右側滾動 (明確左側DIV高於右側,則右側浮動)
function HomeScrollR(a,d){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var e=$(a),c=$(d);if(e.length>0&&c.length>0){function f(){var m=$(window).scrollLeft(),n=$(window).scrollTop(),k=$(document).height(),h=$(window).height(),g=e.height(),j=c.height(),b=e.offset().top,l=e.offset().left+e.outerWidth(!0)-m,i=parseInt(g-h)-parseInt(j-h);if(k<h||j>g||n<b||n<=j-h+b){c.removeAttr("style")}else{if(h>j&&(n-b)>=i||h<j&&(n-b)>=(g-h)){c.attr("style","margin-top:"+i+"px;")}else{c.attr("style","_margin-top:"+(n-b)+"px;position:fixed;left:"+l+"px;"+(h>j?"top":"bottom")+":0;")}}}$(window).resize(f).scroll(f).trigger("resize")}};

左右側滾動呼叫:HomeScroll(“Mid_L”,”Mid_R”)
左側滾動呼叫:HomeScrollL(“Mid_L”,”Mid_R”)
右側滾動呼叫:HomeScrollR(“Mid_L”,”Mid_R”)
js中做了特殊情況處理,比如ipad平板,浮動會有問題,直接就不浮動了,裡面有為了更好的相容IE6等,使用了margin-top方式,如果不考慮IE9以下瀏覽器,這程式碼還可以精簡,寫起來更簡單明瞭

相關文章