The right side of the article content page written by jQuery floats and scrolls

The code written a long time ago, three modes, is now sent out to share with you. In fact, this idea still needs some optimization. I hope you can discuss the optimization

// Left and right side rolling (the height of DIV on the left and right sides is uncertain, get the height of DIV on the left and right sides, if the left side is higher than the right side, the right side will float, otherwise, the left side rolling)
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")}}

// Left scrolling (make sure the DIV on the right is higher than the DIV on the left, then the DIV on the left will float)
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")}};

// Right scrolling (make sure the left DIV is higher than the right, then the right float)
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")}};

Left and right scrolling call: HomeScroll("mid? L", "mid? R")
Left scroll call: HomeScrollL("mid? L", "mid? R")
Right scrolling call: HomeScrollR("mid? L", "mid? R")
js handles special situations, such as the ipad tablet. If it floats, there will be problems. It will not float directly. It uses the margin top mode for better compatibility with IE6. If you do not consider the browsers below IE9, the code can be simplified and written more simply

Tags: Javascript Android iOS

Posted on Sun, 01 Dec 2019 13:17:04 -0800 by ypkumar